观察多个$ scope属性

Question

有没有办法使用多个对象订阅事件 $watch

例如

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

Answer 1

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

Answer 2

从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的例子

文档在这里

Answer 3

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

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

如果您的两个组合值很简单,则第一个参数通常只是一个角度表达式.例如,firstName和lastName:

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

Answer 4

这是一个非常类似于原始伪代码的解决方案,它实际上有效:

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

编辑:好的,我认为这更好:

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

基本上我们正在跳过json步骤,这一步似乎开始时是愚蠢的,但没有它就无法工作.它们的关键是经常省略的第3个参数,它打开对象相等而不是引用相等.然后我们创建的数组对象之间的比较实际上是正确的.

Answer 5

您可以使用$ watchGroup中的函数来选择范围内对象的字段.

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

Answer 6

为什么不简单地把它包装成forEach？

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

它与为组合值提供函数的开销大致相同,而实际上不必担心值组合.

Answer 7

组合值的更安全的解决方案可能是使用以下$watch功能:

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

要么

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

Answer 8

$ watch第一个参数可以是角度表达式或函数.请参阅$ scope的文档.$ watch.它包含许多关于$ watch方法如何工作的有用信息:调用watchExpression时,角度如何比较结果等.