web-dev-qa-db-ja.com

複数の$ scope属性を見る

$watchを使って複数のオブジェクトのイベントを購読する方法はありますか

例えば。

$scope.$watch('item1, item2', function () { });
javascriptangularjseventsangularjs-watch
433
Greg

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 
});
567
Paolo Moretti

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
});

プランカーの例 ここ

ドキュメンテーション ここ

290
Răzvan Flavius Panda

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

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

あなたの2つの組み合わされた値が単純であるならば、最初のパラメータは通常角度表現です。たとえば、firstNameとlastName：

$scope.$watch('firstName + lastName', function() {
  //stuff
});
118
Andrew Joslin

これがあなたのオリジナルの擬似コードと非常によく似た解決策です。

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

編集： わかりました、私はこれがさらに良いと思います：

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

基本的に私たちはjsonのステップをスキップしています。これは最初は愚かに思えましたが、それなしではうまくいきませんでした。それらが重要なのは、参照の等価性とは対照的に、オブジェクトの等価性を有効にする、しばしば省略される3番目のパラメータです。それから、作成した配列オブジェクト間の比較は実際にはうまくいきます。

70
Karen Zilles

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

        $scope.$watchGroup(
        [function () { return _this.$scope.ViewModel.Monitor1Scale; },   
         function () { return _this.$scope.ViewModel.Monitor2Scale; }],  
         function (newVal, oldVal, scope) 
         {
             if (newVal != oldVal) {
                 _this.updateMonitorScales();
             }
         });
15
Yang Zhang

単純にそれをforEachでラップしないのはなぜですか？

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

これは結合された値実際には値の構成を心配する必要はありません _のための関数を提供するのとほぼ同じオーバーヘッドです。

12
Erik Aigner

値を組み合わせるもう少し安全な解決策は、$watch関数として次のようにすることです。

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

または

$scope.$watch(
  function() {
    return angular.toJson([item1, item2]);
  },
  function() {
    // Stuff to do after either value changes
  });
11
guyk

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

5
Artem Andreev

どうですか？

scope.$watch(function() { 
   return { 
      a: thing-one, 
      b: thing-two, 
      c: red-fish, 
      d: blue-fish 
   }; 
}, listener...);
4
wacamo
$scope.$watch('age + name', function () {
  //called when name or age changed
});

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

4
Akash Shinde

Angularは、バージョン1.3で複数の変数を監視できる$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]);
});
1
Vinit Solanki