Verwenden Sie die angular-Direktive, um Klassen von ng-repeat-Elementen zu ändern

Question

Ich versuche, die Klasse eines Elements, das in einer ungeordneten Liste verschachtelt ist, zu ändern.

Wenn ich nicht ng-repeat zum Erstellen der Liste verwende, kann ich den jqlite-Selektor .children() verwenden, um das richtige Element zu finden und die Klasse zu ändern.

Allerdings verwende ich ng-repeat, um die Liste zu erstellen, und ich kann nicht herausfinden, wie auf das spezifische Listenelement, das ich möchte, zuzugreifen. .children() gibt immer undefined zurück.

hier ist ein jsfiddle von dem, was ich versuche, 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') 
     } 
    }; 
}); 

Ich muss in der Lage, die Klasse zu ändern, basierend auf 2 Dinge

1. , wenn der Benutzer klickt auf die spezifischen zu tun Element das Element muss markiert werden
2. , wenn der Benutzer auf eine Schaltfläche klickt, die das nächste Element markiert ist (diese Schaltfläche ist nicht in der JSfiddle enthalten)

Ich dachte über die Richtlinie für jedes Listenelement setzen, aber das einzige Problem ist, dass ich weiß nicht, wie sie alle kennen sich zu machen, so dass nur ein Element zu einem Zeitpunkt

hervorgehoben

Answer 1

Der Dies geschieht, weil ng-repeat das Vorlagen-DOM so ändert, dass die Kinder zum Zeitpunkt der Kompilierung der Anweisung nicht existieren. Sie müssen $watch unter element.children() in der Direktive festlegen, damit die Richtlinie benachrichtigt wird, wenn die untergeordneten Elemente hinzugefügt werden, und das CSS zu diesem Zeitpunkt anwenden. Tun Sie dies in Ihrer link Funktion (das ist eine postLink Funktion, wenn sie als eine Richtlinie Methode deklariert):

$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'); 
     } 
    } 
}); 

Die $watch muss auch überprüfen und sicherstellen, dass die nodeType ist kein Kommentar (Typ 8), weil ng-repeat Einsätze Kommentare, die einen Fehler auslösen, wenn Sie versuchen, CSS anzuwenden.

Fiddle: Hier ist die working fiddle