设置objectEquality
函数的参数(第三个参数)$watch
绝对是观察数组所有属性的正确方法。
$scope.$watch('columns', function(newVal) {
alert('columns changed');
},true); // <- Right here
皮兰(Piran)回答得足够好,也提到$watchCollection
了。
更多详情
我之所以回答已经回答的问题,是因为我想指出Wizardwerdna的答案不是一个好答案,不应该使用。
问题在于摘要不会立即发生。他们必须等到当前代码块完成后才能执行。因此,观看length
数组实际上可能会错过一些重要的变化,这些变化$watchCollection
将引起关注。
假设此配置:
$scope.testArray = [
{val:1},
{val:2}
];
$scope.$watch('testArray.length', function(newLength, oldLength) {
console.log('length changed: ', oldLength, ' -> ', newLength);
});
$scope.$watchCollection('testArray', function(newArray) {
console.log('testArray changed');
});
乍一看,它们似乎会同时触发,例如在这种情况下:
function pushToArray() {
$scope.testArray.push({val:3});
}
pushToArray();
// Console output
// length changed: 2 -> 3
// testArray changed
那已经足够好了,但是考虑一下:
function spliceArray() {
// Starting at index 1, remove 1 item, then push {val: 3}.
$testArray.splice(1, 1, {val: 3});
}
spliceArray();
// Console output
// testArray changed
请注意,所产生的长度是一样的,尽管阵中拥有新的元素,失去的元素,以便作为手表$watch
而言,length
并没有改变。 $watchCollection
捡起它。
function pushPopArray() {
$testArray.push({val: 3});
$testArray.pop();
}
pushPopArray();
// Console output
// testArray change
在同一块中按下并弹出会产生相同的结果。
结论
要监视数组中的每个属性,请在数组$watch
本身上使用一个包含第三个参数(objectEquality)并将其设置为true的属性。是的,这很昂贵,但有时是必需的。
要观察对象何时进入/退出数组,请使用$watchCollection
。
不要在数组$watch
的length
属性上使用a 。我几乎没有理由想到这样做。
angular.equals
当第三个参数采用布尔值时,为什么要使用?