AngularJS：如果child有该类，则添加class

Question

对于动态创建的“sidenav”导航菜单，我想将.active类添加到父<li>，如果其中一个（或更多）的孩子<li>也是{ {1}}。

最佳做法有角度的方法是什么？我尝试了以下 - 我不得不工作：

1。 ngClass - 将ng-repeated元素传递给控制器​​函数

HTML：

.active

在<nav sidenav> <ul> <li ng-repeat="item in items" ng-class="{active: hasActive(this)}"> {{item.name}} <ul> ... children li's not shown ... </ul> </li> </ul> </nav> 指令的控制器中的JS：

sidenav

我认为这不起作用，因为你无法访问ng-repeated元素 - 至少不像我想要的那样。

2。指令和ng-class

HTML

$scope.hasActive() = function (elem) {
  return $(elem).has('.active').length ? true : false;
}

指令<nav sidenav> <ul> <li ng-repeat="item in items" activate ng-class={active: hasActive()}> {{item.name}} <ul> ... children li's not shown ... </ul> </li> </ul> </nav> 的{​​{1}}功能：

activate

我想当孩子们的班级改变时，不会调用link函数。所以我试过......

3。指令和监视功能

HTML：

scope.hasActive = function () {
  return $(elem).has('.active').length ? true : false;
}

hasActive的{​​{1}}功能：

<li ng-repeat="item in items" activate>  ... </li>

不知道为什么这个不起作用！

所以，在向孩子添加类（同时我想避免）的同时，回到jQuery方法将类添加到父级之前，请求社区。 （是的，我知道我上面使用过jQuery ...我不相信activate函数在Angular的jqLit​​e中 - 而且无论如何我都将它用于其他事情。）

欢迎任何其他创建所需结果的方法......承认现有SO帖子。

更新：使用link和var activeChildren = $(elem).has('.active'); scope.$watchCollection(activeChildren, function (newVal, oldVal) { if (newVal) { elem.addClass('active'); } else { elem.removeClass('active'); } });

的工作解决方案

我已将此添加到代码中，该代码将has()类添加到子代（在子代的指令中）：

$emit

并在父母的$on指令中：

.active

（function activate () { elem.addClass('active'); scope.$emit ('activated'); } function deactivate () { elem.removeClass ('active'); scope.$emit ('deactivated'); } 在范围内播放事件heirarchy）

这可能不是最佳实践角度方式，也不是最有效的代码，所以如果有人有任何更好的建议，我会留下问题。

Answer 1

您的第3个选项无效，因为如果您使用$scope.$watchCollection(activeChildren)，那么activeChildren应该是范围变量。此外，它应该是$scope.$watchCollection('activeChildren')

首先，我建议尝试$scope.activeChildren = $(elem).has('.active');。

如果这不起作用，请考虑第3次尝试的以下增强功能：

$scope.$watch(function() {
    return $(elem).has('.active');
}, function(newVal) {
    if (newVal && newVal.length > 0) {
        elem.addClass('active');
    }
    else {
        elem.removeClass('active');
    }
});