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

我将在这里回答具体问题，是的，我知道这不是＆＃34; angular＆＃34;做事的方式。如果你想做的事情＆＃34;纠正＆＃34;方式，然后不要这样做，使用指令。在那里，除了免责声明，这里是如何做到的：

基本上，您要做的是为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的情况下，它会赢得

。

同样，这违背了角度所代表的一切，因此，如果您尝试遵循角度最佳做法，请不要这样做。

我遇到过这种技术很有用的情况，特别是在处理非角度库时，或者在角度方式＆＃34;比它的价值更麻烦。

Answer 2

您需要使用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');
        }
    }
});

演示：Fiddle

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

2 个答案: