javascript - ionic ，AngularJs : Directive attribute $watch stops working after view is rendered

Question

我想为 ionItem 创建一个属性指令，并且希望它观察自己的值:

<ion-item ng-repeat="item in items" my-dir="{{data.watchedValue}}">….</ion-item>

我在指令中创建正确的监视语句时遇到问题。监视在初始 View 渲染期间仅执行一次。此后，当 data.watchedValue 更改时，不会调用它。

该指令的具体之处在于它是 ionItem 指令的子项。

我尝试了多种方法(请参阅 my-dir 源代码中的注释)，但没有一个有效。

指令:

.directive('myDir', function() {
  return {
    restrict: 'A',
    require:  '^ionItem',
    link: function(scope, element, attr, itemCtrl) {
      console.log('my-dir initial value: ' + attr.myDir);

      if (angular.isDefined(attr.myDir)) {
        // scope.$watch("(" + attr.myDir + " === \"true\")", function(value) {
        // scope.$watch('!!(' + attr.myDir + ')', function(value) {
        scope.$watch(attr.myDir, function(value) {
          console.log('my-dir watch new value:  ' + value);
        });
      }

    } // link
  }; // return
}) // directive

简化的指令用法:

<button class="button" ng-click="data.watchedValue = !data.watchedValue">
  Change Value
</button>

<ion-content>
  <ion-list>
    <ion-item ng-repeat="item in items" my-dir="{{data.watchedValue}}">
      Item {{ item.id }}. Watched property: {{ data.watchedValue }}
    </ion-item>
  </ion-list>
</ion-content>

Code Pen有完整的例子。按更改值按钮...更改值。

在初始显示后观察控制台是否有任何日志。

Answer 1

您应该只是将作用域变量名称传递给指令attribute

<ion-item ng-repeat="item in items" my-dir="data.watchedValue">
  Item {{ item.id }}. Watched property: {{ data.watchedValue }}
</ion-item>

或

您可以使用 attrs.$observe 而不是 $scope.$watch，它基本上会监视 {{}}在属性上指定的插值。

If data.watchedValue has object then I'd highly recommend to go for 1st approach.