AngularJS自定义指令与多选
AngularJS自定义指令与多选
假设我有两个指令：“parent”（即表格）和“child”（tr），我希望能够选择子元素并将它们的列表保留在父指令中（我认为控制器是唯一可能的位置，不是吗？）。\n我正在处理点击事件以更新存储在控制器中的列表，并且它运行良好，但我还想保持选定项目的“selected”类，但是因为选择也可能由父指令的控制器更改（并且在控制器中修改DOM是“禁止的”），我能想到的唯一可能性是在子指令中使用一个监视器。\n请看一下示例：\n
angular.module('App')
.directive('parent', function () {
return {
scope : {},
controller: function($scope) {
this.selectedItems = [];
}
}
}).directive('child', function() {
return {
require: '^parent',
link: function(scope, element, attrs, controller) {
scope.$watchCollection('controller.selectedItems', function() {
//在这里添加或删除'selected'类。
}
}
}
});
\n这种方法不起作用（监视器事件仅在数组引用更改而不是单个元素更改时触发），而且似乎设计也不正确，请问是否能提供更好的解决方案？
问题的出现原因是需要在AngularJS中实现对数组的深度监控，以便在数组发生变化时触发事件。在代码中使用了$watch函数，并将其第三个可选参数设置为true，以实现对数组的深度监控。然而，问题并没有得到解决，因为没有使用$apply命令通知其他监视器发生了修改。
解决方法是在数组发生修改后，在控制器中添加$scope.$apply();命令，以通知所有应用程序外部的监视器发生了修改。这样就能够正确地触发事件。
在问题讨论中还提到，AngularJS提供了$watchCollection函数，可以用于监控数组的变化。但是在这个问题中并没有使用$watchCollection，而是使用了$watch函数，并传入了一个返回controller.selectedItems的函数作为参数。这是因为通常直接使用controller.selectedItems并不能正常工作。
最后，问题还涉及到了对selectedItems数组的内容的讨论。selectedItems是一个包含对象的数组，但是并不关心对象内部的变化，而是只关心数组本身的变化，也就是添加或删除项。有人提议可以监控数组的长度来实现这一功能，但是作者解释说他将对象存储在对应的索引位置，因为后续需要使用到这个位置信息，所以数组可能会出现类似[obj, , , , , obj]的情况，而下一个项可能会添加在第三个索引位置等。因此，监控数组的长度并不能满足需求。
问题的出现原因是需要在AngularJS中实现对数组的深度监控，解决方法是使用$watch函数并设置第三个参数为true，并在控制器中添加$scope.$apply();命令。另外，还需要注意selectedItems数组的具体内容和需求。
