2016-11-14 66 views
0

語境觀看指令範圍不工作

我控制器存儲陣列。當按下鍵盤上的特定快捷鍵時,我會向該陣列添加一個新對象。

該數組用於指令內部以顯示圖表。

因此,按快捷鍵時,圖表應更新爲新值。

控制器

vm.observation = [{ 
    "sale": "202", 
    "year": "2010" 
}, { 
    "sale": "215", 
    "year": "2011" 
}, { 
    "sale": "179", 
    "year": "2012" 
}, { 
    "sale": "199", 
    "year": "2013" 
}, { 
    "sale": "134", 
    "year": "2014" 
}, { 
    "sale": "176", 
    "year": "2015" 
}]; 

指令

angular.module('spwApp.directives') 
    .directive('linechart', [function() { 
     return { 
      restrict: 'E', 
      scope: { 
       id: "@", 
       observation: "=" 
      }, 
      link: function($scope, element, attrs) { 
       $scope.$watch("observation", function(newVal, oldVal){ 
        console.log("OBS : " + newVal); 
       }, true); 
      } 
     } 
    }]) 

HTML

<linechart id="linechart3" observation="vm.observation"></linechart> 

當頁面負載第電子海圖正確顯示數據和控制檯正確執行日誌$watch正確執行。

反正按$watch,而陣列更新

我無法找到我的代碼錯誤

+0

嘗試使用$ watchCollection而不是$ watch – George

+0

@Sajeetharan它現在進入'$ watch()'內部,但產生這個錯誤'$ apply already progress' – Weedoze

+0

@GeorgeLee它似乎工作。你可以請帖並回答解釋嗎? – Weedoze

回答

2

你添加了一些陣列則不會觸發快捷方式,但後面的陣列本身停留在相同。一個普通的觀察者只會對變化的值做出反應。這就是爲什麼角還提供$watchCollection

$scope.$watchCollection("observation", 

$watchCollection還監視所述陣列的內容,即,它會檢查是否被刪除或添加的東西。

+1

這很漂亮,使用$ watch來看數組仍然等於一個數組,所以沒有改變,你也可以執行'$ scope。$ watch('observation',function(),true)'真的會做一個「深的「比較,但這與性能命中 – George

+0

@GeorgeLee你是正確的使用深度比較,但'$ watchCollection'更有效率/性能。 – zeroflagL