在一個指令中，$ watch觸發兩次，將newValue恢復到原始的pre $ watch觸發值

我很確定我做錯了什麼，因爲我的角度很少有經驗。也許答案已經在stackoverflow的某個地方了，我不是在問（正確搜索）正確的問題。

我有這個非常簡單的指令。這只是一個有四個狀態的跨度，我希望在跨度上的每次點擊都進行更改。每次點擊都會向前推進狀態，然後循環回去。每個州都有不同的CSS類。每次更改指令的值時，我都希望父級模型中的值發生更改（因此隔離範圍聲明中的「=」，對吧？）。

我把一個值放在改變類的值上，以便每次值改變時都更新css類。

現在，問題是，當我點擊時，手錶被觸發newValue，但手錶再次觸發newValue等於點擊前的值。

我認爲這是與髒檢查和父控制器模型的連接有關的事情，但是，這樣做的正確方法是什麼？並且/或者獲得相同結果的方式更好，更有說服力？

這裏的指令：

.directive('square', function() { 
    return { 
     restrict: 'E', 
     transclude: true, 
     scope : { 
      value : '=', 
     }, 
     link: function(scope, elm, attrs, ctrl) { 

      scope.valueToClass = function(value) { 
       var result = 'square-empty'; 
        if (value == '1') { 
         result = 'square-temp'; 
        } else if (value == '2') { 
         result = 'square-confirmed'; 
        } else if (value == '3') { 
         result = 'square-critical'; 
        } 
       return 'block-'+result; 
      } 

      scope.$watch('value', function(newValue, oldValue) { 
       scope.blockClass = scope.valueToClass(newValue) 

      }, true); 

     }, 
     controller: function($scope, $element, $attrs) { 
      $scope.changeValue = function() { 
       $scope.value = ($scope.value+1) % 4; 
      } 
     }, 
     template : '<span class="{{blockClass}}" ng-click="changeValue();">'+'</span>', 
     replace: true 
    }; 
});

這裏>>the fiddle<<

來源

2013-04-04 Duralumin

請分享jsfiddle – 2013-04-04 10:07:23

同時，我試圖讓它在小提琴中工作。只是想知道是否有什麼明顯的錯誤。 – Duralumin 2013-04-04 10:10:40

這是因爲你看在你的$ scope.block陣列的原始值（整數）的變化。

在控制器

$scope.block = [{value: 3}, {value: 2}, {value: 1}, {value: 0}];

試試這個，然後在視圖：

<square ng-repeat="squareValue in block" value="squareValue.value"></square>

（ENGLSH不是我的第一語言，簡短的回答很抱歉）

來源

2013-04-04 11:05:58

這裏是我的版本：http://jsfiddle.net/TYdzJ/ – 2013-04-04 11:06:23

你不應該使用原始值觀看更改，因爲由於JavaScript子範圍中的原型繼承覆蓋了父範圍值。敬請參閱非常好的文章，其中解釋了所有原因。 https://github.com/angular/angular.js/wiki/The-Nuances-of-Scope-Prototypal-Inheritance

來源

2013-04-04 11:28:37

謝謝你，Ajay和@ ardentum-c，兩個答案都解決了我的問題。我很不確定選擇哪一個被接受，最後是因爲小提琴而選擇了ardentum，因爲他更需要聲望;） – Duralumin 2013-04-04 12:29:07

另一個答案可能幫助別人就是你需要檢查的newval已經改變，的newval將始終傳入，所以你需要檢查它是不一樣的，即：

$scope.$watch('someProperty', function(newVal, oldVal) { 
    if (newVal !== oldVal) { 
     // do something 
    } 
});

我發現這解決了$ watch監聽器過早啓動的問題，無論scope屬性是否是原始的，即我的屬性是一個整數$ scope.menuId。

來源

2013-12-05 09:58:02

在一個指令中，$ watch觸發兩次，將newValue恢復到原始的pre $ watch觸發值

回答

相關問題