AngularJs - Доступ к DOM элементу внутри нг-повтор

Question

У меня есть следующий шаблон:

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

и в моем контроллере у меня есть:

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

Благодарность

Answer 1

Вы должны использовать directive

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

демо: Fiddle

Answer 2

Я собираюсь ответить на конкретный вопрос здесь, да, я понимаю, что это не «Угловая» способ делать вещи. Если вы хотите сделать что-то «правильным», тогда не делайте этого, используйте директиву. Там, отказ от ответственности, вот как это сделать:

В общем, что вы хотите сделать, это предоставить DOM-элементу идентификатор на основе индекса $ или уникального значения в вашем объекте ng-repeat. Здесь я просто использую $ index.

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

Затем внутри контроллера, просто запросить DOM для элемента с этим ID:

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

Мы используем нг-Bind-HTML здесь, потому что элемент DOM будет существовать, когда контроллер функция выполняет, в случае чего-то вроде ng-init, это не будет.

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

Я столкнулся с ситуациями, когда технику полезно, особенно при работе с негладкими библиотеками, или в тех случаях, когда «угловой путь» представляет большую проблему, чем это стоит.