javascript - angularjs - 单击按钮更改另一个元素的内容

Question

所以问题标题含糊不清，但基本上我有一个按钮元素，我想单击该按钮并让另一个元素被它改变。谁能给我任何关于我所缺少的东西的想法，或者给我一个如何实现这一目标的明确示例。

代码如下:

html:

<div ng-controller="buttonController">
     <button ng-click="fadeIt()">click to fade</button>
     <div class="redbox" my-directive my-two-way-binding="twoWay">fade me</div>
</div>

Controller :

function buttonController($scope){
    $scope.twoWay = false;

    $scope.fadeIt = function(){
        $scope.twoWay = !$scope.twoWay;
        console.log("inside fadeIt function $scope.twoWay is: " + $scope.twoWay);
    }
}

指令:

app.directive("myDirective", function(){
     return{
         restrict:"A",
         scope: {
             twoWayBind: "=myTwoWayBinding"
         },
         link:function(scope, element, attrs){
             //console.log("directive - twoWayBind is: " + scope.twoWayBind);    
             scope.$watch(scope.twoWayBind, function(newVal){
                 console.log('inside directive ' + scope.twoWayBind);    
             });
         }
     };
 });

Answer 1

scope.$watch(scope.twoWayBind 应该是 scope.$watch('twoWayBind' 因为 $watch 接受引用作用域属性的字符串，而不是实际模型。除此之外，我认为您的想法是正确的。

另外，为了清洁起见，你本可以做到的

scope:{
  twoWayBind: "=myDirective"
}

那么您可以将您的模板代码缩短为:

 <div class="redbox" my-directive="twoWay">

在我看来这更干净一些。