Angular $ watch不會觸發我的指令中的任何事件

Question

我嘗試根據自定義指令的屬性值更新元素內容。下面的代碼執行得很好，但只在網站加載一次。屬性值的動態更新不會觸發任何事件。我做錯了什麼？

標記NG-重複內（在比賽中賽）：使用

屬性名稱作爲字符串解決了這個問題，但造成的：

<div ng-tipp-result="[[getIconClass(match)]]"></div> 

指令：

myApp.directive('ngTippResult', function() { 
    return { 
     restrict: 'A', 
     link: function(scope, elem, attrs) { 
      var content = "s"; 

      scope.$watch(attrs.ngTippResult, function(v){ 
       switch(v){ 
        case 1: content = '<i class="icon-circle"></i>';break; 
        case 2: content = '<i class="icon-X"></i>';break; 
        case 3: content = '<i class="icon-Y"></i>';break; 
        case 4: content = '<i class="icon-Z"></i>';break; 
        case 5: content = '<i class="icon-ok"></i>';break; 
        case 6: content = '<i class="icon-minus"></i>';break; 
       } 

       elem.html(content); 
      }); 
     } 
    }; 
}); 

編輯另外，我遇​​到了上面代碼的infinit摘要循環。

<li ng-repeat="match in matches"> 
    <i class="pull-right [[getIconClass(match)]]"></i> 
</li> 

getIconClass是一種控制器方法，根據匹配返回值從1到6。

Answer 1

對於要觀看的值，$watch的第一個參數應該是吸氣劑功能。請嘗試

scope.$watch(function(){return attrs.ngTippResult}, function(v){...}); 

請參閱文檔here。

可能發生的事情是attrs.ngTippResult正在計算字符串。字符串是一個有效的輸入，但我不認爲這就是你的意圖;好像你想每次更新attrs.ngTippResult更新。相反，您當前的代碼正在使用attrs.ngTippResult的值觀察範圍內的屬性（例如，如果attrs.ngTippResult爲"fish"，那麼您使用當前代碼觀察的值實際上是$scope.fish，這可能不是你想要什麼

編輯

而且，你想要做什麼aaronfrost的回答可能是最好的

Answer 2

您可以將屬性映射到你的指令範圍：

myApp.directive('ngTippResult', function() { return { scope: { theTippResult:"=ngTippResult", ...}}});

那麼你只需要把變量名中的字符串： scope.$watch('theTippResult', function(v){...});

- 或 - 使用功能的方法類似Hylianpuffball建議，但我還是把它映射到模型只是作爲「自我記錄」的代碼。

Answer 3

對於指令中的attrs對象，您不應該使用scope。$ watch。您應該使用attrs。$ observe。它的構建目的是讓您無需觀看即可觀看屬性值。但是，語法幾乎相同。

查看doc here