Angularjs全域變數被作用域監聽的正確姿勢_AngularJS

如果你只想知道結論：

$scope.$watch($rootScope.xxx,function(newVal,oldVal){
//do something
})

馬上就有人問為什麼不是:

$rootScope.$watch("xxx",function(newVal,oldVal){
//do something
})

從我最近的一個bug來說說為什麼要用第一種方式。

邏輯如圖，一開始我使用了 $rootScope.$watch 的寫法。因為 angularjs 在 $rootScope 上的 watch 一旦註冊全域有效。而我的這個全域變數恰好是訂單訊息，也就是說不同的 controller 對他都是有改動的，每一次改動就會觸發 $rootScope.$watch 進入別的 controller。可以類比看一下 $rootScope 上的 $broadcast 會全域出發的。

其實這不是唯一的方式，查一下angular 原始碼不難找到 watch 方法原始碼不分如下程式碼：

return function deregisterWatch() {
if (arrayRemove(array, watcher) >= 0) {
incrementWatchersCount(scope, -1);
}
lastDirtyWatch = null;
};

這段程式碼告訴我們，手動清理 watch 是可行的。例如：

var watcher = $rootScope.$watch("xxx",function(){});
//手动清除 watcher 
watcher();

還是很簡單對吧，以上方法同樣可以用在 scope 上的 watch。

研究到這裡的時候，覺得有點問題，那我在 $scope 會被清理麼？於是呼，繼續翻源碼，我在 $destroy 方法裡面找到如下碼：

// Disable listeners, watchers and apply/digest methods
this.$destroy = this.$digest = this.$apply = this.$evalAsync = this.$applyAsync = noop;
this.$on = this.$watch = this.$watchGroup = function() { 
return noop; 
};
this.$$listeners = {};

以上程式碼是本文介紹給大家的Angularjs全域變數被作用域監聽的正確姿勢，希望大家有所幫助，本文寫的不好還請各位大俠多多指教。