Angularjs全局變量被作用域監(jiān)聽的正確姿勢
更新時間：2016年02月06日 15:55:42 投稿：mrr
這篇文章主要介紹了Angularjs全局變量被作用域監(jiān)聽的正確姿勢的相關(guān)資料,需要的朋友可以參考下
如果你只想知道結(jié)論：
$scope.$watch($rootScope.xxx,function(newVal,oldVal){
//do something
})
馬上就有人問為什么不是:
$rootScope.$watch("xxx",function(newVal,oldVal){
//do something
})
從我最近的一個bug來說說為什么要用第一種方式。
邏輯如圖，一開始我使用了 $rootScope.$watch 的寫法。因為 angularjs 在 $rootScope 上的 watch 一旦注冊全局有效。而我的這個全局變量恰好是訂單信息，也就是說不同的 controller 對他都是有改動的，每一次改動就會觸發(fā) $rootScope.$watch 進入別的 controller。可以類比看一下 $rootScope 上的 $broadcast 會全局出發(fā)的。
其實這并不是唯一的方式，查一下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 會被清理么？于是呼，繼續(xù)翻源碼，我在 $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全局變量被作用域監(jiān)聽的正確姿勢，希望大家有所幫助，本文寫的不好還請各位大俠多多指教。
相關(guān)文章
angularjs 表單密碼驗證自定義指令實現(xiàn)代碼
這篇文章主要介紹了angularjs 表單密碼驗證自定義指令實現(xiàn)代碼,需要的朋友可以參考下2016-10-10
這篇文章主要介紹了解決ionic和angular上拉加載的問題,需要的朋友可以參考下2017-08-08
Angular 是一個流行的框架，用于構(gòu)建動態(tài)和響應(yīng)式 Web 應(yīng)用程序，在本文中，我們將討論延遲加載以及它如何與 Angular 中的路由一起工作，感興趣的可以跟隨小編一起學(xué)習(xí)一下2023-06-06
這篇文章主要為大家詳細介紹了angularjs實現(xiàn)天氣預(yù)報功能，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-10-10
本篇文章主要介紹了AngularJs之過濾器（filter）詳解，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-02-02
本文主要介紹AngularJS 服務(wù)，這里整理了AngularJS 服務(wù)的基本知識資料，并附示例代碼和實現(xiàn)效果圖，有興趣的小伙伴可以參考下2016-08-08
AngularJS基礎(chǔ) ng-include 指令示例講解
本文主要介紹AngularJS ng-include 指令,這里對ng-include 指令的知識做了詳細整理介紹,有需要的朋友可以參考下2016-08-08
這篇文章主要介紹了Angularjs之filter過濾器的相關(guān)資料,非常不錯，具有一定的參考借鑒價值，需要的朋友可以參考下2016-11-11
這篇文章主要介紹了Angular如何由模板生成DOM樹的方法，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-12-12
AngularJS提供了過濾器來對輸入輸出數(shù)據(jù)格式化。這篇文章主要介紹了Angularjs過濾器使用的相關(guān)資料,需要的朋友可以參考下2016-05-05