11

我有下一个模板：

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

谢谢

4

2 回答 2

19

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

基本上，您要做的是根据 $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 最佳实践，请不要这样做。

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

于 2015-07-13T18:37:27.557 回答
14

您需要为此使用指令

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

演示：小提琴

于 2013-03-14T17:12:48.963 回答