ホームページ  >  記事  >  ウェブフロントエンド  >  Angularjs グローバル変数をscope_AngularJS で監視する正しい方法

Angularjs グローバル変数をscope_AngularJS で監視する正しい方法

WBOY
WBOYオリジナル
2016-05-16 15:16:051289ブラウズ

結論だけを知りたい場合:

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

誰かがすぐに、なぜそうしないのか尋ねました:

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

私が最近遭遇したバグの最初の方法を使用する必要がある理由を説明しましょう。

ロジックは図の通りです。最初は$rootScope.$watchの記述方法を使用しました。 $rootScope 上の angularjs の監視は、一度登録されるとグローバルに有効になるためです。そして、私のグローバル変数は偶然にも注文情報です。これは、さまざまなコントローラーがその変数に変更を加えていることを意味し、すべての変更が $rootScope.$watch をトリガーして他のコントローラーに入るようにします。同様に、$rootScope 上の $broadcast がグローバルに開始されます。

実際には、これが唯一の方法ではありません。次のコードを含む Angular ソース コードをチェックすることで、watch メソッドのソース コードを見つけることは難しくありません。

return function deregisterWatch() {
if (arrayRemove(array, watcher) >= 0) {
incrementWatchersCount(scope, -1);
}
lastDirtyWatch = null;
};
このコードは、時計を手動でクリーニングすることが可能であることを示しています。例:

var watcher = $rootScope.$watch("xxx",function(){});
//手动清除 watcher 
watcher();
それでも非常に簡単ですよね?上記の方法はスコープ上の時計にも使用できます。

これを調査したときに、問題があると感じました。$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 グローバル変数を監視するための正しい姿勢です。この記事がうまく書かれていない場合は、アドバイスをお願いします。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。