Javascript 具有多重选择的AngularJS自定义指令

假设我有两个指令：“parent”（即table）和“child”（tr），我希望能够选择子元素并将它们的列表保存在parent指令中（我认为控制器是唯一可能的位置，不是吗？）。 我正在处理click事件以更新存储在控制器中的列表，它工作正常，但我也希望为所选项目保留“selected”类，但因为父指令的控制器也可能更改选择（并且在控制器中修改DOM是“禁止的”），我唯一能想到的可能就是在我的孩子指令中加入一个观察者

请看一看示例：

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() {
                //add or remove 'selected' class here.
            }
        }
    }
});

这不起作用（watcher事件仅在数组引用更改而不是单个元素时触发），而且它似乎也没有正确设计，您能为我提供更好的方法来解决这个问题吗

更新：

请注意，

controller.selectedItems

在控制器中被修改，但是子指令似乎没有看到任何更改。

请参见：

您应该使用$watch并将第三个可选参数$watch设置为true

        scope.$watch(function(){
            return controller.selectedItems;
            },
            function() {
            //add or remove 'selected' class here.
            },
            true
        );

更新：

好的，那么您还应该通知所有应用程序外部观察者已经进行了修改。在AngularJS中，如果一个变量被控制器修改，但在其他地方被监视，并且如果没有$digest或$apply，则监视者不会看到任何更改。因此，问题不是观察者的选择，而是缺少$apply命令

只需添加：

$scope.$apply();

---

更改数组后在控制器中。

在控制器中修改数组后，我通过调用$scope.$apply（）将其修复。方法由javascript事件触发，因此摘要循环可能永远不会运行

---

如果有人对上述设计有其他建议，请让我知道。

Angular为此提供了$watch集合，因此我认为我不应该使用deep watch，它也不起作用-它仍然只在引用更改时触发selectedItems的内容是什么？是简单值或对象的数组？在第二种情况下，你需要仔细观察。无论如何，我使用了

function（）{return controller.selectedItems；}

，因为通常给出

controller.selectedItems

不起作用。它是对象数组，但我不想知道单个对象的变化，而是想知道数组中的变化-删除/添加的项目。例如，每当新项添加到此数组中时，我都希望触发事件。那么为什么不查看数组的大小呢？我将它们存储在与其实际位置相对应的索引中，因为我以后需要该位置，这样数组可能看起来像[obj，，，，obj]，下一项可能会添加到第三个索引中，或者更明显。如果某个变量由控制器修改，但在其他地方被监视，如果没有$digest或$apply，则监视程序不会看到任何更改。所以问题出在别的地方。在您的OP中，为了完全理解问题，代码丢失了！没错。非常感谢你的帮助！根据您的反馈添加了修复解决方案。