Angularjs 在使用 ControllerAs 时观察 Array 的输入绑定变化

Question

我有一个与英雄绑定的 AngularJs 组件，它是一个数组。如何观察这个输入的数组变化？我尝试了$scope.watch("heroes", ...) 和$onChanges，但到目前为止都没有成功。

bindings: {
    heroes: '<',
}

这是我的小伙伴：https://plnkr.co/edit/J8xeqEQftGq3ULazk8mS?p=preview

Answer 1

ControllerAs 结构需要一个特殊的监视表达式，因为属性不在 $scope 上。

//This one works and is the best one (> AngularJs 1.5)
$scope.$watch("$ctrl.heroes.length", function () {
  console.log("ControllerAs syntax"); // Triggers once on init
});

//This one works as well
var ctrl = this;
$scope.$watch(() => {
  return ctrl.heroes.length;
}, (value) => {
  console.log("complex watch"); // Triggers once on init
});

在此处查看示例：https://plnkr.co/edit/J8xeqEQftGq3ULazk8mS?p=preview

Answer 2

出现此问题是因为 $scope.$watch 默认情况下不会深入观察对象。这意味着由于您从不销毁/重新创建数组，因此引用并没有真正改变，因此 $scope.$watch 没有看到任何变化。如果您观看了heroes.length，则该原语将发生变化，您的$scope.$watch 将触发相应的监听功能。通过使用$scope.$watch 和true 选项，您告诉角度引擎深入观察所有属性。 这对于大型对象来说非常密集，因为 $scope.$watch 使用 angular.copy 来跟踪更改

如果您要使用$scope.$watchCollection，角度会创建一个浅拷贝，并且占用的内存会更少。所以我觉得你的 3 个主要选择是

观看heroes.length，添加true或使用$watchCollection

我觉得使用heroes.length 是最好的选择，所以代码看起来像

$scope.$watch('heroes.length',function(){});

其他两个选项如下所述

$scope.$watch('heroes',function(){ //do somthing },true)

或

$scope.$watchCollection

使用 watchCollection 的好处是，它需要更少的内存来深入观察一个对象。

Shallow 监视对象的属性并在任何时候触发 属性改变（对于数组，这意味着观察数组 项目;对于对象贴图，这意味着观察属性）。如果一个 检测到变化，触发监听回调。

obj 集合是通过标准的 $watch 操作观察到的，并且是 在每次调用 $digest() 时检查是否有任何项目 添加、删除或移动。任何时候都会调用监听器 里面的 obj 发生了变化。示例包括添加、删除和 移动属于对象或数组的项目。