AngularJs - 访问 ng-repeat 中的 DOM 元素答案

【问题标题】：AngularJs - Access to DOM element inside ng-repeatAngularJs - 访问 ng-repeat 中的 DOM 元素
【发布时间】：2013-03-03 04:21:43
【问题描述】：

我有下一个模板：

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

谢谢

【问题讨论】：

你需要使用指令来做到这一点
请你举个例子来做这件事，非常感谢

标签： angularjs element angularjs-ng-repeat

【解决方案1】：

我将在这里回答具体问题，是的，我知道这不是“有角度”的做事方式。如果您想以“正确”的方式做事，请不要这样做，请使用指令。除了免责声明，这里是如何做到的：

基本上，您要做的是根据 $index 或 ng-repeat 对象中的唯一值为 DOM 元素提供一个 ID。在这里，我将只使用 $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 最佳实践，请不要这样做。

我遇到过这种技术很有用的情况，尤其是在处理非角度库时，或者那些“角度方式”比它的价值更麻烦的时候。

【讨论】：

【解决方案2】：

您需要为此使用directive

<div ng-app="test-app" ng-controller="MyController">
    <div ng-repeat="friend in friends" nop>
       {{friend.title}}
    </div>
</div>

app.directive('nop', function(){
    return {
        link: function(scope, elm){
            console.log('eee', elm, arguments);
            elm.css('color', 'red');
        }
    }
});

演示：Fiddle

【讨论】：

这正是我所需要的：D。谢谢你阿伦！
有时会喜欢 Angular。