角度指示を使用してng-repeat要素のクラスを変更します

Question

順序付けられていないリストに入れ子になっている要素のクラスを条件変更しようとしています。

ng-repeatを使用してリストを作成しないときは、jqliteセレクタ.children（）を使用して正しい要素を見つけてクラスを変更できます。

しかし、私はリストを作成するためにng-repeatを使用しています。私が望む特定のリスト要素にアクセスする方法を理解できません。 .children（）は常にundefinedを返します。

ここ

は、ユーザーが特定の上でクリックしたときに、私は2つのこと

1. に基づいて、クラスを変更することができるようにする必要があり、私は http://jsfiddle.net/whitehead1415/ENtTC/3/

   app.directive('myDirective1', function() { 
       return { 
        restrict: 'A', 
        link: function ($scope, element, attrs, controller) { 
         //for some reason element.children()[0] is undefined 
         //why? what can I do about it? 
         angular.element(element.children()[0]).css('background', 'grey') 
        } 
       }; 
   }); 
   

   を行うにしようとしています何のjsfiddleです要素がハイライトする必要がある要素

2. ユーザーが次の要素であるボタンをクリックすると、その要素が強調表示されます（そのボタンはjsfiddleには含まれません）

私は、各リスト要素にディレクティブを置くことについて考えたが、唯一の問題は、私はお互いのそれらすべてを認識させる方法がわからないということですので、一つだけの要素が時間

Answer 1

で強調表示されていますこの理由は、ng-repeatが、ディレクティブがコンパイルされた時点で子が存在しないようにテンプレートDOMを変更するためです。ディレクティブでelement.children()に$watchを設定する必要があります。そのため、ディレクティブが子の追加時に通知され、その時点でCSSを適用します。 （ディレクティブメソッドとして宣言するときpostLink機能である）あなたのlink機能でこれを行います。

$scope.$watch(element.children(),function(){ 
    var children = element.children(); 
    for(var i=0;i<children.length;i++){ 
     if(children[i].nodeType !== 8){ 
      angular.element(children[i]).css('background', 'grey'); 
     } 
    } 
}); 

$watchもチェックしnodeTypeコメント（タイプ8）ではないことを確認する必要がng-repeat挿入ので、コメントは、CSSを適用しようとするとエラーになります。

フィドル：ここでは、この作品working fiddle