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

Plunker 示例在这里

文档在这里

于 2013-06-20T22:25:32.293 回答
118

$watch第一个参数也可以是函数。

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

如果您的两个组合值很简单，则第一个参数通常只是一个角度表达式。例如，名字和姓氏：

$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 步骤，一开始这似乎很愚蠢，但没有它就无法工作。它们的关键是经常省略的第三个参数，它打开对象相等而不是引用相等。然后我们创建的数组对象之间的比较实际上是正确的。

于 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，角度如何比较结果等。

于 2012-08-14T13:35:04.467 回答
4 
$scope.$watch('age + name', function () {
  //called when name or age changed
});

Here function will get called when both age and name value get changed.

于 2015-04-16T19:21:12.590 回答
4

怎么样：

scope.$watch(function() { 
   return { 
      a: thing-one, 
      b: thing-two, 
      c: red-fish, 
      d: blue-fish 
   }; 
}, listener...);
于 2012-11-12T19:45:20.677 回答
1

Angular$watchGroup在 1.3 版中引入，我们可以使用它来观察多个变量，一个$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 回答