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

谢谢

- Zzarcon

---

你需要使用一个指令来完成这个任务。 - Arun P Johny

请您能否提供一些示例来完成这个任务，非常感谢。 - Zzarcon

Answer 1

我要在这里回答具体的问题，是的，我明白这不是“Angular”的做法。如果你想按照“正确”的方式做事情，那么不要这样做，使用指令。除此之外，以下是如何操作的：

基本上，你想要做的是根据$index或ng-repeat对象中的唯一值为DOM元素分配一个ID。在这里，我将只使用$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之类的情况下，则不会存在。

同样，这违反了angular所代表的一切，因此如果您正在尝试遵循angular最佳实践，请不要这样做。

我遇到过这种技术有用的情况，特别是处理非angular库或那些“angular方式”会带来更多麻烦的时候。

- Clayton Gulick

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

演示：Fiddle

- Arun P Johny

---

有时候一定要爱上Angular。 - Code Whisperer