AngularJs - 访问ng-repeat中的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

我将在这里回答具体问题,是的我明白这不是"有棱有角"的做事方式.如果你想以"正确"的方式做事,那么不要这样做,使用指令.在那里,免责声明,这是如何做到这一点:

基本上,您要做的是为DOM元素提供基于$ index的ID或ng-repeat对象中的唯一值.在这里,我只使用$ index.

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

然后,在控制器内部,只需查询具有该ID的元素的DOM:

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

我们在这里使用ng-bind-html,因为当你的控制器函数执行时,DOM元素将存在,在类似ng-init的情况下,它不会.

同样,这与所有角度代表相反,因此如果您尝试遵循角度最佳实践,请不要这样做.

我遇到过这种技术很有用的情况,特别是在处理非角度库时,或者那些"角度方式"比它的价值更麻烦的时候.

Answer 2

您需要使用一个指令为

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

演示:小提琴