AngularJs - Tiếp cận phần tử DOM bên ng-repeat

Question

Tôi có mẫu tiếp theo:

<div ng-repeat="friend in friends | filter:filterFriendsHandler"> 
    {{friend.name}} 
</div> 

và trong điều khiển của tôi có:

$scope.filterFriendsHandler = function(friend){ 
    //HERE I WANT TO ACCESS TO FRIEND DOM ELEMENT; to do something like this: 
    //$(friendElement).text('foo'); 
} 

Cảm ơn

Answer 1

Bạn cần phải sử dụng một directive cho rằng

<div ng-app="test-app" ng-controller="MyController"> 
    <div ng-repeat="friend in friends" nop> 
     {{friend.title}} 
    </div> 
</div> 

JS

app.directive('nop', function(){ 
    return { 
     link: function(scope, elm){ 
      console.log('eee', elm, arguments); 
      elm.css('color', 'red'); 
     } 
    } 
}); 

demo: Fiddle

Answer 2

tôi sẽ trả lời các câu hỏi cụ thể ở đây, vâng tôi hiểu điều này không phải là "góc" cách làm việc. Nếu bạn muốn làm mọi thứ theo cách "đúng", thì đừng làm điều này, hãy sử dụng chỉ thị. Về cơ bản, những gì bạn muốn làm là cung cấp cho phần tử DOM một ID dựa trên chỉ số $ hoặc một giá trị duy nhất trong đối tượng ng-lặp lại của bạn. Ở đây, tôi sẽ chỉ sử dụng $ index.

<div ng-repeat="friend in friends" id="friend_{{$index}}" ng-bind-html="doSomethingBadToTheDom('friend_' + $index)"> 
    {{friend.title}} 
</div> 

Sau đó, bên trong điều khiển của bạn, chỉ cần truy vấn DOM cho các phần tử với ID:

$scope.doSomethingBadToTheDom = function(ele_id) { 
    var element = document.getElementById(ele_id); 
    element.innerHTML = "I'm abusing angular"; 
} 

Chúng tôi đang sử dụng ng-bind-html ở đây vì phần tử DOM sẽ tồn tại khi điều khiển của bạn chức năng thực hiện, trong trường hợp của một cái gì đó như ng-init, nó sẽ không.

Một lần nữa, điều này đi ngược lại tất cả mọi thứ là viết tắt của góc cạnh, vì vậy nếu bạn đang cố gắng thực hiện theo các phương pháp hay nhất góc cạnh, đừng làm điều này.

Tôi đã gặp phải các tình huống mà kỹ thuật này rất hữu ích, đặc biệt là khi giao tiếp với các thư viện không góc cạnh hoặc những thời điểm "góc cạnh" gặp nhiều rắc rối hơn giá trị của nó.