использовать угловую директиву для изменения классов элементов ng-repeat

Question

Я пытаюсь условно изменить класс элемента, который вложен в неупорядоченный список.

Если вы не используете ng-repeat для создания списка, я могу использовать селектор jqlite .children(), чтобы найти правильный элемент и изменить класс.

Однако я использую ng-repeat для создания списка, и я не могу понять, как получить доступ к определенному элементу списка, который я хочу. .children() всегда возвращает undefined.

вот jsfiddle того, что я пытаюсь сделать 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') 
     } 
    }; 
}); 

Мне нужно, чтобы иметь возможность изменить класс на основе 2-х вещей

1. , когда пользователь нажимает на конкретные Элемент должен выделить
2. , когда пользователь нажимает на кнопку, которая является следующим элементом, будет выделена (эта кнопка не включена в jsfiddle)

Я думал о вводе директивы по каждому элементу списка, но единственная проблема в том, что я не знаю, как сделать их все знают друг друга, так только один элемент подсвечивается в то время

Answer 1

причина в том, что это происходит потому, что ng-repeat изменяет шаблон DOM таким образом, что дети не существуют в момент компиляции директивы. Вам нужно установить $watch на директиву element.children(), чтобы директива была уведомлена о том, когда дети будут добавлены и примените 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.

Fiddle: Вот это working fiddle