Question

我想为ionItem创建一个属性指令，我希望它能看到自己的值：

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

我在指令中创建正确的watch语句时遇到问题。在初始视图渲染期间，手表仅执行一次。之后，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完整示例。按Change Value按钮以...更改值。

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

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，这基本上会监视属性上指定的{{}}插值。

如果data.watchedValue有对象，那么我强烈建议您选择第一种方法。

Ionic，AngularJs：指令属性$ watch在呈现视图后停止工作

1 个答案: