У меня есть следующий шаблон:
<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');
}
Спасибо
Вам нужно использовать 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
Я собираюсь ответить на конкретный вопрос здесь, да, я понимаю, что это не способ "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" больше проблем, чем это стоит.