親要素をクリックしたときに子クラスを変更する

Question

親がクリックされたときに親要素の子にクラスを追加したり、関数内のすべての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ディレクティブを使用することができます。ちょうどあなたがあなたがディレクティブ

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.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

にクリックで切り替えることができます$スコープのプロパティを設定します

ハイレベルでは

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

、ディレクティブは、それに指定された動作を添付するAngularJSのHTMLコンパイラに伝える（そのような属性、要素名、コメントやCSSクラスなど）DOM要素上のマーカー（$コンパイル）されていますDOM要素（例：イベントリスナーを介して）、DOM要素とその子要素を変換することさえできます。