观察多个$scope属性

是否有一种方法可以使用$watch订阅多个对象上的事件

如。

$scope.$watch('item1, item2', function () { });
193624 次浏览

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

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

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

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

$watch的第一个参数可以是角表达式或function。参见有关范围。美元的手表的文档。它包含了很多关于$watch方法如何工作的有用信息:何时调用watchExpression, angular如何比较结果等。

一个稍微安全一点的组合值的解决方案可能是使用下面的$watch函数:

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

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

如何:

scope.$watch(function() {
return {
a: thing-one,
b: thing-two,
c: red-fish,
d: blue-fish
};
}, listener...);

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

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

编辑:好吧,我觉得这个更好:

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

基本上,我们跳过了json步骤,这一开始看起来很愚蠢,但没有它就无法工作。关键是经常被忽略的第三个参数,它开启对象相等而不是引用相等。然后,我们创建的数组对象之间的比较实际上是正确的。

为什么不简单地将它包装在forEach中?

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

这与为组合值而不用担心价值构成提供函数的开销大致相同。

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

活塞例子在这里

文档在这里

从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
});
$scope.$watch('age + name', function () {
//called when name or age changed
});

在这里,当年龄和名称值都被改变时,函数将被调用。

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

        $scope.$watchGroup(
[function () { return _this.$scope.ViewModel.Monitor1Scale; },
function () { return _this.$scope.ViewModel.Monitor2Scale; }],
function (newVal, oldVal, scope)
{
if (newVal != oldVal) {
_this.updateMonitorScales();
}
});
Angular在1.3版引入了$watchGroup,用它我们可以用一个$watchGroup块来监视多个变量 $watchGroup将array作为第一个参数,我们可以在其中包含所有要观察的变量
$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]);
});