如何观察指令中的属性变化

Question

我有一个像这样设置的角度指令（带有隔离范围）

<div ng="$last" somedirective datajson=mydata myprop="{{ mydata.myspecialprop }}"></div>

（实际上会多次渲染，因为它在 ng-repeat 中。）

按照这个SO answer的说明，我尝试观察myprop指令中的更改，但是，即使属性更改（在单击事件上）， $scope.watch 中的代码也永远不会运行。 我也试过scope.$watch(attrs.myprop, function(a,b){...)并且它也从未运行过。 我如何观察myprop的变化

myapp.directive('somedirective', function () {
  return {
    restrict: 'AE',
    scope: {
      datajson: '=',
      myprop: '@'
    },
    link: function (scope, elem, attrs) {
      scope.$watch(scope.myprop, function (a, b) {
        if (a != b) {
          console.log("doesn't get called when a not equal b");
        } else {

        }
      });
    }
  };
}

更新：更改属性的点击事件是控制器中的句柄，我猜这不会反映在隔离范围指令中，因此永远不会触发 $watch 。 有办法处理吗？

Answer 1

当您使用插值绑定 ( @ ) 时，您不能使用scope.$watch ，它是为双向绑定 ( = ) 或内部作用域属性保留的。

相反，您需要使用attrs.$observe来完成类似的工作：

link: function(scope, elem, attrs){
   attrs.$observe('myprop', function(newVal, oldVal) {
     // For debug purposes
     console.log('new', newVal, 'old', oldVal);
     if (newVal != oldVal){
          console.log("doesn't get called when newVal not equal oldVal");
      } else {
          // ...
     } 
   });
 }

此外，每次myprop更改时， newVal都会与其oldVal不同，因此您跳过这种情况oldVal ，这是唯一会发生的情况。

注意：您还忘记了datajson双向绑定的双引号： datajson="mydata"

Answer 2

Intead 传递字符串，尝试将其作为变量

scope: {
     datajson: '=',
     myprop: '=' //change to equal so you can watch it (it has more sense i think)
  }

然后更改 html，从 mydata.myspecialprop 中删除大括号

<div ng="$last" somedirective datajson="mydata" myprop="mydata.myspecialprop"></div>