具有多选功能的 AngularJS 自定义指令

Question

假设我有 2 个指令：“父”（即表）和“子”（tr），我希望能够选择子元素并将它们的列表保留在我的父指令中（我认为控制器是唯一可能的地方，不是吗？）。 我正在处理单击事件以更新存储在我的控制器中的列表，它工作正常，但我也想为选定的项目保留“选定”类，但因为选择也可能由父指令的控制器更改（和在控制器中修改 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.
            }
        }
    }
});

这不起作用（观察者事件仅在数组引用发生变化而不是单个元素时触发）并且它似乎也没有正确设计，您能否为我提供一个更好的方法来解决这个问题？

更新：

注意 controller.selectedItems 在控制器中被修改，但是子指令似乎没有看到任何变化。

Answer 1

在修改控制器中的数组后，我通过调用 $scope.$apply() 来修复它。方法是由 javascript 事件触发的，因此摘要循环可能从未运行过。

如果有人对上述设计有其他建议，请告诉我。

Answer 2

请看： How to deep watch an array in angularjs?

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

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

更新：

好的，因此您还应该通知所有应用程序外部观察者发生了修改。在 AngularJS 中，如果一个变量被控制器修改但在其他地方观察，并且如果没有 $digest 或 $apply 观察者看不到任何变化。所以问题不在于观察者的选择，而在于缺少 $apply 命令。

只需添加：

$scope.$apply();

在你的控制器中改变数组之后。