angularJS の $watch 無効化問題の解決策の詳細な説明

この記事は主に angularJS の $watch エラーの問題の解決策を紹介しています。興味のある方は参考にしてください。

この記事では、angularJS の $watch エラーの問題の解決策について簡単に説明します。これを皆さんと共有し、自分用にメモしておきたいと思います

$watch メソッドは、各スコープの変数を監視するのに役立ちます。

$watch 単一変数

数値や文字列などの通常の変数については、次のように直接記述することで、変数の変化を監視し、対応する関数を実行できます。

$scope.count=1;
$scope.$watch('count',function(){
...
});

$複数の変数を監視

複数の変数の変化を監視する場合、同じ関数を実行すると、これらの変数を文字列に変換し、「+」記号で区切って監視できます

//当count或page变化时，都会执行这个匿名函数
$scope.count=1;
$scope.page=1;
$scope.$watch('count + page',function(){
...
});

$watch object or array

上記の 2 つのメソッドを使用して配列を監視すると、配列の内容が変更されても、この匿名関数はトリガーされないことがわかりました。後で、watch 関数には実際には 3 つの変数があることがわかりました。最初のパラメータは監視する必要があるオブジェクトであり、2 番目のパラメータは監視対象のオブジェクトが変更されたときに呼び出す必要がある関数です。 、デフォルトでは false です。

3 番目のパラメーターが false の場合、watch 関数は実際に配列のアドレスを監視し、配列の内容の変更は配列アドレスの変更に影響を与えないため、watch 関数は失敗します。

解決策は、後で 3 番目のパラメーターを true に追加することです (もちろん、この listen 関数を使用して、オブジェクトまたは配列を JSON 文字列の形式の匿名関数として返すこともできます)。または、JSON 文字列の形式でオブジェクトまたは配列を返す匿名関数を監視します

$scope.items=[
{a:1},
{a:2}
{a:3}];
$scope.$watch('items',function(){...},true);

$watch 関数の戻り結果

コードを作成しているとき、戻り値を監視する必要がある場合があります。関数の結果が変わったので、$watch監視関数の状態を確認してみました。

方法1: 監視オブジェクトは「関数名()」の文字列なので「()」を忘れずに付けてください!

$scope.items=[
{a:1},
{a:2}
{a:3}];
$scope.$watch(function(){
  return JSON.stringify($scope.items);
},function(){...});

方法2: 監視オブジェクトに匿名関数として設定してリターンを返す監視する機能の値 (混乱しています...)

//未完成的任务个数
$scope.unDoneCount = function() {
  var count = 0;
  angular.forEach($scope.todoList, function(todo) {
    count += todo.done ? 0 : 1;
  });
  return count;
};
//单选影响全选部分
$scope.$watch('unDoneCount()', function(nv) {
  $scope.isDoneAll = nv ? false : true;
});

$watch

watchをキャンセルするとパフォーマンスがかなり消費されるようなので、監視する必要がなくなったWatchは忘れずにキャンセルしてください定期的に。

キャンセル方法ですが… ずっと探してやっと見つけました

実は、各watch関数が返す結果がこのwatchのderegisterWatch()関数なのです

$scope.$watch(function(){
  return $scope.unDoneCount();//不要忘了(),要执行的啊~
}, function(nv) {
  $scope.isDoneAll = nv ? false : true;
});

ということで、監視をキャンセルしたい場合は、まず $watch の戻り値を保存し、監視をキャンセルしたいときにそれを呼び出します。

りー

以上がangularJS の $watch 無効化問題の解決策の詳細な説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。