Question

在单击父元素时，是否有更有效的方法使用angular来更改或向父元素的子元素添加类，然后获取函数中的所有childNodes并为每个子元素添加一个类？

<div class="menu-icon-container" ng-click="changeState()">
    <div ng-repeat="bar in [bar1, bar2, bar3] track by $index" class="bar{{$index + 1}} "></div>
</div>

所需的结果是，当点击menu-icon-container时，其中的div将根据条件切换一个类。

Answer 1

您可以使用ng-style指令。只需在$ scope上设置一个属性，您可以点击div.menu-icon-container

切换

<div class="menu-icon-container" ng-click="conditionForClassName = !conditionForClassName">
  <div ng-repeat="bar in [bar1, bar2, bar3] track by $index" 
    ng-class="{ 'className': conditionForClassName }"></div>
</div>

Docs for ngStyle

Answer 2

你可以使用指令

DIRECTIVE

 myApp.directive('addClassChild', function($timeout) {
   var linkFn = function(scope, element, attrs) {
      element.bind("click", function() {
        for (var i = 0; i < element[0].children.length+1; i++) {
           element.children().eq(i).addClass('active');
        }
      });
   };
return {
   link: linkFn,
   restrict: 'A',
};
})

HTML

<div class="menu-icon-container" add-class-child>
    <div ng-repeat="bar in [bar1, bar2, bar3] " class="bar{{$index + 1}} ">
      {{$index}}
    </div>
</div>

在高级别，指令是DOM元素上的标记（例如属性，元素名称，注释或CSS类），它告诉AngularJS的HTML编译器（$ compile）将指定的行为附加到该DOM元素（例如，通过事件监听器），甚至转换DOM元素及其子元素。

单击父元素时更改子类

2 个答案: