使用angular指令來改變ng-repeat元素的類

Question

我試圖conditionally改變嵌套在無序列表中的元素的類。

當不使用ng-repeat創建列表時，我可以使用jqlite選擇器.children（）來查找正確的元素並更改類。

但是我使用ng-repeat來創建列表，我無法弄清楚如何訪問我想要的特定列表元素。 .children（）總是返回undefined。

這裏是什麼，我試圖做 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') 
     } 
    }; 
}); 

我需要基於兩件事情

1. 能夠改變類的jsfiddle當在特定的用戶點擊元素需要突出顯示
2. 當用戶點擊一個按鈕時，下一個元素將被突出顯示（該按鈕不包含在jsfiddle中）

我想過把指令每個列表元素，但唯一的問題是，我不知道如何讓他們都知道彼此只有一個元素的同時強調了

Answer 1

的發生這種情況的原因是因爲ng-repeat改變了模板DOM，使得在指令編譯時孩子不存在。您需要在指令中的element.children()上設置$watch，以便在添加子項並在當時應用CSS時通知該指令。在link功能做到這一點（這是作爲指令方法聲明時postLink功能）：

$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