首頁 > web前端 > js教程 > Angularjs全域變數被作用域監聽的正確姿勢_AngularJS

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

WBOY
發布: 2016-05-16 15:16:05
原創
1355 人瀏覽過

如果你只想知道結論:

$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全域變數被作用域監聽的正確姿勢,希望大家有所幫助,本文寫的不好還請各位大俠多多指教。

來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板