如何监视指令中的属性更改答案

【问题标题】：How to watch for a property change in a directive如何监视指令中的属性更改
【发布时间】：2015-05-14 17:36:46
【问题描述】：

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

<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 永远不会被触发。有办法处理吗？

【问题讨论】：

myprop: '@ 没有结束 ' 只是复制粘贴问题吗？
您是否尝试过使用 scope.$watch('myprop' , function(a,b){}});，我的指令以这种方式监视范围变量并且它工作正常。
@DylannWatt 是的，只是复制粘贴/错别字
@Kathir 我也试过了，当道具改变时没有任何反应
我认为问题可能是控制器中处理了单击事件，并且更改未反映在 Isolate scop 指令中。有解决办法吗？

标签： angularjs

【解决方案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 不同，因此您跳过唯一会发生的情况有点奇怪.

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

【讨论】：

【解决方案2】：

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

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>

【讨论】：