AngularJS：如果子级有类，则添加该类

对于动态创建的“sidenav”导航菜单，我想将

.active

类添加到父级

，如果它的一个（或多个）子级
也
.active

做这件事的最佳做法是什么？我尝试了以下方法，但没有一种方法是我必须做到的：

1.ngClass-将ng重复元素传递给控制器函数
HTML:

我认为这不起作用，因为您无法访问ng repeated元素-至少不像我尝试的那样

2.指令与ng类
HTML

我猜当孩子们的班级发生变化时，
hasActive
函数不会被调用。所以我试着

3.指令和监视功能
HTML:

不知道为什么这个不行

因此，在恢复到jQuery方法之前，是时候询问社区了，该方法在将类添加到子类的同时将类添加到父类（我希望避免这种情况）。（是的，我知道我已经使用了上面的jQuery…我不相信Angular的jqLite中有
has（）
函数，而且我还在其他方面使用它。）

任何其他创建所需结果的方法都是受欢迎的。。。承认存在这些方面的现有SO职位

更新：使用
$emit
和
$on
我已将其添加到代码中，该代码将
.active
类添加到子类（在子指令中）：

在家长的
激活
指令中：

function activate () {
  elem.addClass('active');
  scope.$emit ('activated');
}
function deactivate () {
  elem.removeClass ('active');
  scope.$emit ('deactivated');
}

scope.$on('activated', function() {
  elem.addClass('active');
});
scope.$on('deactivated', function () {
  elem.removeClass('active');
});

（
$emit
将事件向上广播到范围继承权）

这可能不是最佳实践方式，也不是最有效的代码，因此如果有人有更好的建议，我将保留这个问题。
您的第三个选项无法工作，因为如果您使用
$scope.$watchCollection（activeChildren）
，那么
activeChildren
应该是范围变量。另外，它应该是
$scope.$watchCollection（'activeChildren'）

因此，首先，我建议尝试
$scope.activeChildren=$（elem）.has（'.active'）取而代之

如果这不起作用，考虑以下第三个尝试的增强：
$scope.$watch(function() {
    return $(elem).has('.active');
}, function(newVal) {
    if (newVal && newVal.length > 0) {
        elem.addClass('active');
    }
    else {
        elem.removeClass('active');
    }
});

谢谢，亚龙。尽管尝试了许多不同的建议（使用
elem.has（）
，
elem.find（）
，
elem.children（））
和
$watchCollection
代替
$watch
，我无法让
$watch
在儿童类更改时启动。我找到了使用
$emit
和
$on
的解决方案，我将在上面添加这些解决方案。
scope.hasActive = function () {
  return $(elem).has('.active').length ? true : false;
}

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

var activeChildren = $(elem).has('.active');
scope.$watchCollection(activeChildren, function (newVal, oldVal) {
  if (newVal) {
  elem.addClass('active');
  } else {
  elem.removeClass('active');
  }
});

function activate () {
  elem.addClass('active');
  scope.$emit ('activated');
}
function deactivate () {
  elem.removeClass ('active');
  scope.$emit ('deactivated');
}

scope.$on('activated', function() {
  elem.addClass('active');
});
scope.$on('deactivated', function () {
  elem.removeClass('active');
});

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