Angularjs全局變量被作用域監(jiān)聽(tīng)的正確姿勢(shì)
如果你只想知道結(jié)論：
$scope.$watch($rootScope.xxx,function(newVal,oldVal){
//do something
})
馬上就有人問(wèn)為什么不是:
$rootScope.$watch("xxx",function(newVal,oldVal){
//do something
})
從我最近的一個(gè)bug來(lái)說(shuō)說(shuō)為什么要用第一種方式。
邏輯如圖，一開(kāi)始我使用了 $rootScope.$watch 的寫(xiě)法。因?yàn)?angularjs 在 $rootScope 上的 watch 一旦注冊(cè)全局有效。而我的這個(gè)全局變量恰好是訂單信息，也就是說(shuō)不同的 controller 對(duì)他都是有改動(dòng)的，每一次改動(dòng)就會(huì)觸發(fā) $rootScope.$watch 進(jìn)入別的 controller。可以類比看一下 $rootScope 上的 $broadcast 會(huì)全局出發(fā)的。
其實(shí)這并不是唯一的方式，查一下angular 源碼不難找到 watch 方法源碼不分有如下代碼：
return function deregisterWatch() {
if (arrayRemove(array, watcher) >= 0) {
incrementWatchersCount(scope, -1);
}
lastDirtyWatch = null;
};
這段代碼告訴我們，手動(dòng)清理 watch 是可行的。例如：
var watcher = $rootScope.$watch("xxx",function(){});
//手動(dòng)清除 watcher
watcher();
還是很簡(jiǎn)單對(duì)吧，以上方法同樣可以用于 scope 上的 watch。
研究到這里的時(shí)候，覺(jué)得有點(diǎn)問(wèn)題，那我在 $scope 會(huì)被清理么？于是呼，繼續(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)聽(tīng)的正確姿勢(shì)，希望大家有所幫助，本文寫(xiě)的不好還請(qǐng)各位大俠多多指教。
相關(guān)文章
初學(xué)者AngularJS的環(huán)境搭建過(guò)程
這篇文章主要介紹了初學(xué)者AngularJS的環(huán)境搭建過(guò)程,在文章給大家提到了Angular-cli的特性，大家一起看看吧2017-10-10
AngularJS學(xué)習(xí)筆記之ng-options指令
ng-options是angular-1.3新出的一個(gè)指令,這篇文章就來(lái)介紹這個(gè)指令的用法.有需要的小伙伴可以參考下。2015-06-06
AngularJS中一般函數(shù)參數(shù)傳遞用法分析
這篇文章主要介紹了AngularJS中一般函數(shù)參數(shù)傳遞用法,結(jié)合實(shí)例形式分析了模型參數(shù)與普通參數(shù)的具體功能與使用技巧,需要的朋友可以參考下2016-11-11
掌握Queries設(shè)計(jì)模式優(yōu)化Angular應(yīng)用開(kāi)發(fā)技巧
這篇文章主要介紹了掌握Queries設(shè)計(jì)模式優(yōu)化Angular應(yīng)用開(kāi)發(fā)的技巧示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-10-10
這篇文章主要介紹了AngularJS入門教程之Hello World!,本文用經(jīng)典的應(yīng)用程序“Hello World!”來(lái)講解AngularJS,要的朋友可以參考下2014-12-12
AngularJS學(xué)習(xí)筆記（三）數(shù)據(jù)雙向綁定的簡(jiǎn)單實(shí)例
這篇文章主要介紹了AngularJS學(xué)習(xí)筆記（三）數(shù)據(jù)雙向綁定的簡(jiǎn)單實(shí)例，詳解數(shù)據(jù)雙向綁定實(shí)例的相關(guān)資料,需要的朋友可以參考下。2016-11-11
AngularJs動(dòng)態(tài)加載模塊和依賴注入詳解
這篇文章主要為大家介紹了AngularJs動(dòng)態(tài)加載模塊和依賴注入，感興趣的小伙伴們可以參考一下2016-01-01
關(guān)于angular js_$watch監(jiān)控屬性和對(duì)象詳解
下面小編就為大家?guī)?lái)一篇關(guān)于angular js_$watch監(jiān)控屬性和對(duì)象詳解。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-04-04
AngularJS 仿微信圖片手勢(shì)縮放的實(shí)例
這篇文章主要介紹了AngularJS 仿微信圖片手勢(shì)縮放的實(shí)例的相關(guān)資料,希望大家通過(guò)本文實(shí)現(xiàn)這樣的功能，需要的朋友可以參考下2017-09-09
angularJs中datatable實(shí)現(xiàn)代碼
本篇文章主要介紹了angularJs中datatable實(shí)現(xiàn)代碼，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-06-06