sử dụng chỉ thị góc để thay đổi các lớp của các phần tử ng-repeat

Question

Tôi đang cố gắng điều kiện thay đổi lớp của phần tử được lồng trong một danh sách không có thứ tự.

Khi không sử dụng ng-repeat để tạo danh sách, tôi có thể sử dụng bộ chọn jqlite .children() để tìm phần tử chính xác và thay đổi lớp.

Tuy nhiên tôi đang sử dụng ng-lặp lại để tạo danh sách và tôi không thể tìm ra cách truy cập phần tử danh sách cụ thể mà tôi muốn. .children() luôn trả về không xác định.

đây là một jsfiddle về những gì tôi đang cố gắng để làm 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') 
     } 
    }; 
}); 

tôi cần để có thể thay đổi các lớp dựa trên 2 điều

1. khi người dùng nhấp vào cụ thể yếu tố cần phải làm nổi bật
2. khi người dùng nhấp vào nút là phần tử tiếp theo sẽ được đánh dấu (nút đó không được bao gồm trong jsfiddle)

Tôi nghĩ về việc đưa các chỉ thị trên mỗi phần tử danh sách, nhưng vấn đề duy nhất là tôi không biết làm thế nào để làm cho họ tất cả nhận thức lẫn nhau vì vậy chỉ một yếu tố được nhấn mạnh tại một thời điểm

Answer 1

Các lý do điều này xảy ra là vì ng-repeat thay đổi DOM mẫu theo cách mà trẻ không tồn tại tại thời điểm biên dịch chỉ thị. Bạn cần đặt một số $watch trên element.children() trong chỉ thị để chỉ thị sẽ được thông báo khi trẻ được thêm vào và áp dụng CSS tại thời điểm đó. Làm điều này trong chức năng link của bạn (mà là một chức năng postLink khi khai báo là một phương pháp chỉ thị):

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

Các $watch cũng cần phải kiểm tra và chắc chắn rằng nodeType không phải là một lời nhận xét (loại 8) vì ng-repeat chèn nhận xét, điều này sẽ gây ra lỗi nếu bạn cố gắng áp dụng CSS.

Fiddle: Đây là working fiddle