454

を使用して複数のオブジェクトのイベントをサブスクライブする方法はありますか$watch

例えば

$scope.$watch('item1, item2', function () { });
4

11 に答える 11

595

AngularJS 1.3から$watchGroup、一連の式を監視するために呼び出される新しいメソッドがあります。

$scope.foo = 'foo';
$scope.bar = 'bar';

$scope.$watchGroup(['foo', 'bar'], function(newValues, oldValues, scope) {
  // newValues array contains the current values of the watch expressions
  // with the indexes matching those of the watchExpression array
  // i.e.
  // newValues[0] -> $scope.foo 
  // and 
  // newValues[1] -> $scope.bar 
});
于 2014-05-06T12:51:28.057 に答える
291

AngularJS 1.1.4以降では、以下を使用できます$watchCollection。

$scope.$watchCollection('[item1, item2]', function(newValues, oldValues){
    // do stuff here
    // newValues and oldValues contain the new and respectively old value
    // of the observed collection array
});

プランカーの例はこちら

ここにドキュメント

于 2013-06-20T22:25:32.293 に答える
118

$watch最初のパラメーターは関数にすることもできます。

$scope.$watch(function watchBothItems() {
  return itemsCombinedValue();
}, function whenItemsChange() {
  //stuff
});

2つの組み合わせた値が単純な場合、最初のパラメーターは通常、角度式にすぎません。たとえば、firstNameとlastNameは次のとおりです。

$scope.$watch('firstName + lastName', function() {
  //stuff
});
于 2012-08-14T13:04:28.700 に答える
71

これは、実際に機能する元の擬似コードと非常によく似たソリューションです。

$scope.$watch('[item1, item2] | json', function () { });

編集：さて、私はこれがさらに良いと思います：

$scope.$watch('[item1, item2]', function () { }, true);

基本的に、最初は馬鹿げているように見えたjsonステップをスキップしていますが、それなしでは機能しませんでした。それらのキーは、参照の同等性ではなくオブジェクトの同等性をオンにする、しばしば省略される3番目のパラメーターです。次に、作成した配列オブジェクト間の比較が実際に正しく機能します。

于 2013-01-19T01:05:31.747 に答える
15

$ watchGroupの関数を使用して、スコープ内のオブジェクトのフィールドを選択できます。

        $scope.$watchGroup(
        [function () { return _this.$scope.ViewModel.Monitor1Scale; },   
         function () { return _this.$scope.ViewModel.Monitor2Scale; }],  
         function (newVal, oldVal, scope) 
         {
             if (newVal != oldVal) {
                 _this.updateMonitorScales();
             }
         });
于 2015-05-20T23:57:43.953 に答える
12

単純に包んでみませんforEachか？

angular.forEach(['a', 'b', 'c'], function (key) {
  scope.$watch(key, function (v) {
    changed();
  });
});

これは、実際に値の構成を気にすることなく、結合された値の関数を提供するのとほぼ同じオーバーヘッドです。

于 2013-05-12T14:31:54.230 に答える
11

値を組み合わせるためのもう少し安全な解決策は、$watch関数として以下を使用することです。

function() { return angular.toJson([item1, item2]) }

また

$scope.$watch(
  function() {
    return angular.toJson([item1, item2]);
  },
  function() {
    // Stuff to do after either value changes
  });
于 2012-10-02T08:16:15.993 に答える
5

$ watchの最初のパラメーターは、角度式または関数にすることができます。$scope。$watchのドキュメントを参照してください。$ watchメソッドがどのように機能するかについての多くの有用な情報が含まれています：watchExpressionが呼び出されたとき、angularが結果を比較する方法など。

于 2012-08-14T13:35:04.467 に答える
4

どうですか：

scope.$watch(function() { 
   return { 
      a: thing-one, 
      b: thing-two, 
      c: red-fish, 
      d: blue-fish 
   }; 
}, listener...);
于 2012-11-12T19:45:20.677 に答える
4 
$scope.$watch('age + name', function () {
  //called when name or age changed
});

ここでは、年齢と名前の両方の値が変更されたときに関数が呼び出されます。

于 2015-04-16T19:21:12.590 に答える
1

バージョン1.3で導入されたAngular$watchGroupを使用すると、複数の変数を監視できます。単一の$watchGroupブロック $watchGroupで配列を最初のパラメーターとして使用し、監視するすべての変数を含めることができます。

$scope.$watchGroup(['var1','var2'],function(newVals,oldVals){
   console.log("new value of var1 = " newVals[0]);
   console.log("new value of var2 = " newVals[1]);
   console.log("old value of var1 = " oldVals[0]);
   console.log("old value of var2 = " oldVals[1]);
});
于 2018-04-02T08:47:16.913 に答える