arrays - Angular $watch 不适用于数组和数据集合

Question

我需要注意对象列表中的更改，并对更改执行一些操作，但是，Angular$watch仅触发一次，当列表首次创建并将初始对象推入其中时：

$scope.$watch('components', function(newComponents, oldComponents) {
  if (typeof $scope.components !== 'undefined')) {
    return;
  }
  // this alert show only on first change
  alert('change');
});

// only pushing first object triggers the $watch
$scope.components.push({ id: 1, name: 'first component'});
$scope.components.push({ id: 2, name: 'second component'});
$scope.components.push({ id: 3, name: 'third component'});

Answer 1

解决方案是使用$watchCollection代替$watch方法：

$scope.$watchCollection('components', function(newComponents, oldComponents) {
  if (typeof $scope.components !== 'undefined')) {
    return;
  }
  // now this alert will show for each new element added!
  alert('change');
});

来源：https ://code.angularjs.org/1.3.15/docs/api/ng/type/$rootScope.Scope#$watchCollection

Answer 2

需要注意的是，$watchCollection 仅监视对象/数组的 1 层。在您的情况下，这似乎很好。

要观看具有多层次深度的更复杂的对象，需要使用带有“true”作为第二个属性的 $watch。

查看此内容以获取 $watch 与 $watchCollection 的详细说明