AngularJs - доступ к элементу DOM внутри ng-repeat

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

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

Спасибо

Ответ 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');
        }
    }
});

demo: Fiddle

Ответ 2

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

В принципе, то, что вы хотите сделать, это предоставить 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";
}

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

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

Я столкнулся с ситуациями, когда этот метод полезен, особенно при работе с библиотеками не angular, или теми случаями, когда "angular" больше проблем, чем это стоит.