javascript - $watch(Collection) 不捕获对象属性更改

Question

我在模板中有这个字符串:

<li class="list__item" ng-repeat="item in items">
  <input class="toggle" type="checkbox" ng-model="item.done">
  <label>{{ item.description }}</label>
  <button class="destroy" ng-click="remove(item)"></button>
</li>

和我 Controller 中的 js 代码:

$scope.$watchCollection('items', function(newValue, oldValue) {
  cache.set($scope.items);
});

$scope.items 已定义。

当我检查一个项目时，$watchCollection 没有捕捉到这个变化。我阅读了 todo mvc 源代码并没有发现我的错误。

错在哪里？谢谢。

Answer 1

watchCollection 监视 items 集合中的细微变化。这意味着它只会在元素添加/删除到 items 集合时触发。如果您希望 watch 在您更改 item 的属性时触发，则必须使用 watch。

来自文档:

Shallow watches the properties of an object and fires whenever any of the properties change (for arrays, this implies watching the array items; for object maps, this implies watching the properties).