2

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

bindings: {
    heroes: '<',
}

这是我的插件： https ://plnkr.co/edit/J8xeqEQftGq3ULazk8mS ?p=preview

4

2 回答 2

3

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

于 2016-04-21T07:57:51.903 回答
0

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

如果您要使用$scope.$watchCollectionangular 会创建一个浅拷贝并且会减少内存密集型。所以我觉得你的三个主要选择是

观看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 中的任何内容发生更改时，都会调用侦听器。示例包括添加、删除和移动属于对象或数组的项目。

于 2016-04-18T16:01:31.950 回答