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

ここで特定の質問に答えます。はい、これは「角度のある」方法ではないことを理解しています。「正しい」方法で物事を行いたい場合は、これを行わないでください。ディレクティブを使用してください。免責事項はさておき、これを行う方法は次のとおりです。

基本的には、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 などの場合はそうではありません。

繰り返しますが、これは 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 に答える