Ionic，AngularJs：呈現視圖后，指令屬性$ watch停止工作

Question

我想為ionItem創建一個屬性指令，並且希望它觀察自己的值：

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

我在指令中創建正確的watch語句時遇到問題。 在初始視圖渲染期間，手表僅執行一次。 此后，當data.watchedValue更改時，不會調用它。

該指令的特定之處在於它是ionItem指令的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>

帶有完整示例的代碼筆 。 按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有對象，那么我強烈建議您采用第一種方法。