AngularJS:$ watchをクリアする


277

AngularJSアプリケーションに監視機能があります。

$scope.$watch('quartzCrystal', function () {
   ...
}

ただし、ある条件(私の例では、単一ページのアプリケーションでページを変更する)の後、そのウォッチを停止したい(タイムアウトをクリアするように)。

どうやってやるの?

回答:


520

$watch登録解除関数を返します。これを呼び出すと、の登録が解除されます$watcher

var listener = $scope.$watch("quartz", function () {});
// ...
listener(); // Would clear the watch

24
コントローラのライフサイクルの最後に(のように$on('$destroy'))すべてのリスナーを登録解除するのが良い方法であるか、それともAngularJSがそれらを処理するかを知っていますか?ありがとう!
ヨーク、2013年

81
スコープが破壊されると、すべてのウォッチャーが削除されます。それらを管理する必要はありません
UmurKontacı2013年

6
あなたは問題を説明し、ここで興味深い議論を見ることができます:github.com/angular/angular.js/issues/4574基本的に、あなたは$ rootScopeにリスナーを割り当てた場合、あなたはそれをあなたの自己の割り当てを解除する必要がある、またはそれを通じ持続します$ scopeの変更。$ scopeのウォッチャーは$ scopeで破棄されます($ scopesはAngularのシングルトンではなく、必要に応じて作成および破棄されます)。
Mladen Danic 2014年

3
しかし、値が存在するかどうかを確認するウォッチャーだけが必要で、存在する場合はいくつかの変更を行ってから、登録を解除しました-var listen = $ scope。$ watch( 'mvIdentity.currentUser'、function(currentUser ){test = 1; console.log( "->" + $ scope.updateemail + "-" + test); listen();});
Harshit Laddha 2014年

4
@UmurKontacı実際のデッドマンのコメントは完全に有効です。元のコメントはすべてのケースで正しくないからです。
GFoley83 14

49

scope。$ watchは、呼び出し可能な関数を返します。これにより、時計の登録が解除されます。

何かのようなもの:

var unbindWatch = $scope.$watch("myvariable", function() {
    //...
});

setTimeout(function() {
    unbindWatch();
}, 1000);

14
はい、watchFn内でバインドを解除できます。単純なユースケース:watchFnを1回だけ監視および実行してから、監視を停止する場合。
Mike Rapadas、2015年

3
unbind関数を呼び出した後、もう一度呼び出すなど、時計を再バインドできますか?
Bruno Finger

これは役に立ちました。unbindWatchをタイムアウトで実行することは、私のテストでは重要なようです。
eeejay 2015年

この場合、$ timeoutを使用する必要があります。これは登録解除することもできます。
Ben Taliadoros 2016

タイムアウトを回避するのが最善
Davi Lima

25

何かが発生した直後に時計をクリアしたい場合は、コールバック内の時計をクリアすることもできます。これにより、$ watchは使用されるまでアクティブのままになります。

そのようです...

var clearWatch = $scope.$watch('quartzCrystal', function( crystal ){
  if( isQuartz( crystal )){
    // do something special and then stop watching!
    clearWatch();
  }else{
    // maybe do something special but keep watching!
  } 
}

4

$ watchが呼び出されるdynamicallyと、インスタンスが作成されるので、$watch関数の前に登録解除関数を呼び出す必要があります

if(myWatchFun)
  myWatchFun(); // it will destroy your previous $watch if any exist
myWatchFun = $scope.$watch("abc", function () {});

4

理想的には、スコープを離れるときは、すべてのカスタムウォッチを削除する必要があります。

メモリ管理とアプリのパフォーマンスの向上に役立ちます。

// call to $watch will return a de-register function
var listener = $scope.$watch(someVariableToWatch, function(....));

$scope.$on('$destroy', function() {
    listener(); // call the de-register function on scope destroy
});

4

ウォッチャーが多すぎてすべてをクリアする必要がある場合は、ウォッチャーを配列にプッシュして、すべて$watchをループで破棄できます。

var watchers = [];
watchers.push( $scope.$watch('watch-xxx', function(newVal){
   //do something
}));    

for(var i = 0; i < watchers.length; ++i){
    if(typeof watchers[i] === 'function'){
        watchers[i]();
    }
}

watchers = [];

弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.