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 angular会创建一个浅拷贝，并且内存密集度会降低。所以我觉得你的3个主要选择是

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

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

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

其他两个选项如下所述

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

或

$scope.$watchCollection

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

浅看物体的属性并在任何时候发射   属性改变（对于数组，这意味着观察数组   项目;对于对象图，这意味着观察属性）。如果一个   检测到更改，将触发侦听器回调。

通过标准的$ watch操作观察obj集合   检查每次调用$ digest（）以查看是否有任何项目   添加，删除或移动。无论什么时候都会调用监听器   在obj内已经改变了。示例包括添加，删除和   移动属于对象或数组的项目。

Angularjs在使用ControllerAs时监视Array的输入绑定更改

2 个答案: