użyj dyrektywy kątowej, aby zmienić klasy elementów powtarzających ng

Question

Próbuję warunkowo zmienić klasę elementu, który jest zagnieżdżony na liście nieuporządkowanej.

Gdy nie używasz powtórzenia ng do utworzenia listy, mogę użyć selektora jqlite .children(), aby znaleźć właściwy element i zmienić klasę.

Jednak używam ng-repeat, aby utworzyć listę i nie mogę wymyślić, jak uzyskać dostęp do określonego elementu listy, który chcę. .children() zawsze zwraca undefined.

o to jsfiddle co próbuję zrobić 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') 
     } 
    }; 
}); 

muszę być w stanie zmienić klasę na podstawie 2 rzeczy

1. gdy użytkownik kliknie na specyficzny element element musi podświetlić
2. , gdy użytkownik kliknie przycisk, który jest podświetlony na następnym elemencie (ten przycisk nie jest zawarty w jsfiddle)

myślałem o wprowadzenie dyrektywy w sprawie każdego elementu listy, ale jedynym problemem jest to, że nie wiem, jak je świadomi siebie, więc tylko jeden element jest podświetlony w czasie

Answer 1

powodem tego jest fakt, że ng-repeat zmienia szablon DOM w taki sposób, że dzieci nie istnieją w chwili kompilacji dyrektywy. Musisz ustawić $watch na element.children() w dyrektywie, aby dyrektywa została powiadomiona, gdy dzieci zostaną dodane i zastosować CSS w tym czasie. Czy to w funkcji link (co jest postLink funkcja gdy zadeklarowana jako metoda dyrektywy):

$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 musi również sprawdzić i upewnić się, że nodeType nie jest komentarz (typ 8) ponieważ ng-repeat wkładkami komentarze, które spowodują błąd przy próbie zastosowania CSS.

Fiddle: Oto working fiddle