如何觀察指令中的屬性變化

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>