Angularjs 使用 ControllerAs 时观察 Array 的输入绑定变化
Angularjs watch input binding change for Array when using ControllerAs
我有一个 AngularJs 组件绑定到英雄，它是一个数组。如何观察这个输入的数组变化？我尝试了 $scope.watch("heroes", ...) 和 $onChanges，但到目前为止没有成功。
bindings: {
heroes: '<',
}
出现这个问题是因为默认情况下 $scope.$watch 没有深入观察对象。这意味着因为你从来没有 destroy/recreate 你的数组，引用并没有真正改变因此 $scope.$watch 没有看到任何变化。如果您观看 heroes.length，该原语会发生变化，并且您的 $scope.$watch 会触发相应的监听功能。通过将 $scope.$watch 与 true 选项一起使用，您告诉 angular 引擎深入监视所有属性。
这对于大对象来说是非常密集的，因为 $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 的好处是，它需要更少的内存来深入观察对象。
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). If a
change is detected, the listener callback is fired.
The obj collection is observed via standard $watch operation and is
examined on every call to $digest() to see if any items have been
added, removed, or moved. The listener is called whenever anything
within the obj has changed. Examples include adding, removing, and
moving items belonging to an object or array.
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
});
我有一个 AngularJs 组件绑定到英雄，它是一个数组。如何观察这个输入的数组变化？我尝试了 $scope.watch("heroes", ...) 和 $onChanges，但到目前为止没有成功。
bindings: {
heroes: '<',
}
出现这个问题是因为默认情况下 $scope.$watch 没有深入观察对象。这意味着因为你从来没有 destroy/recreate 你的数组，引用并没有真正改变因此 $scope.$watch 没有看到任何变化。如果您观看 heroes.length，该原语会发生变化，并且您的 $scope.$watch 会触发相应的监听功能。通过将 $scope.$watch 与 true 选项一起使用，您告诉 angular 引擎深入监视所有属性。
这对于大对象来说是非常密集的，因为 $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 的好处是，它需要更少的内存来深入观察对象。
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). If a change is detected, the listener callback is fired.
The obj collection is observed via standard $watch operation and is examined on every call to $digest() to see if any items have been added, removed, or moved. The listener is called whenever anything within the obj has changed. Examples include adding, removing, and moving items belonging to an object or array.
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
});