$ watch未在阵列更改时触发

Question

我想弄清楚为什么我$watch没有被触发.这是相关控制器的片段:

$scope.$watch('tasks', function (newValue, oldValue) {
    //do some stuff
    //only enters here once
    //newValue and oldValue are equal at that point
});

$scope.tasks = tasksService.tasks();

$scope.addTask = function (taskCreationString) {
    tasksService.addTask(taskCreationString);//modifies tasks array
};

在我看来,tasks显然正在更新正确,因为我的长度限制如下:

<span>There are {{tasks.length}} total tasks</span>

我错过了什么？

Answer 1

试试$watch('tasks.length', ...)或$watch('tasks', function(...) { ... }, true).

默认情况下,$ watch不检查对象是否相等,仅供参考.因此,$watch('tasks', ...)将始终只返回相同的数组引用,这不会改变.

更新: Angular v1.1.4添加了一个$ watchCollection()方法来处理这种情况:

Shamp监视对象的属性,并在任何属性发生更改时触发(对于数组,这意味着要观察数组项,对于对象映射,这意味着要观察属性).如果检测到更改,listener则会触发回调.

Answer 2

@Mark非常好的答案.除了他的回答,还有一个$watch你应该注意的功能的重要功能.

随着$watch函数声明如下:

$watch(watch_expression, listener, objectEquality)

该$watch 监听器仅当从当前的价值函数被调用监视表达式(在你的情况下,它是'tasks')和上一次调用观看表达是不相等的.Angular保存对象的值以供以后比较.因此,观看复杂的选项将会产生不利的内存和性能影响.基本上更简单的手表表达值越好.

Answer 3

我建议尝试

$scope.$watch('tasks | json', ...)

这将捕获对tasks数组的所有更改,因为它将序列化数组作为字符串进行比较.