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 methodsthis.$destroy = this.$digest = this.$apply = this.$evalAsync = this.$applyAsync = noop;this.$on = this.$watch = this.$watchGroup = function() { return noop; };this.$$listeners = {};

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