2013-03-14 6 views
10

Ich habe die nächste Vorlage:AngularJS - Zugriff auf DOM-Element innerhalb ng-repeat

<div ng-repeat="friend in friends | filter:filterFriendsHandler"> 
    {{friend.name}} 
</div> 

und in meinem Controller ich habe:

$scope.filterFriendsHandler = function(friend){ 
    //HERE I WANT TO ACCESS TO FRIEND DOM ELEMENT; to do something like this: 
    //$(friendElement).text('foo'); 
} 

Dank

+0

Sie müssen eine Anweisung verwenden, um das zu tun –

+0

Bitte können Sie ein Beispiel dafür machen, vielen Dank – Zzarcon

Antwort

14

Sie müssen verwenden directive dafür

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

Demo: Fiddle

+0

Das ist genau das, was ich brauchte: D. Danke dir Arun! – Zzarcon

+0

Muss manchmal Angular lieben. –

18

ich hier die spezifische Frage beantworten werde, ja, ich verstehe das nicht die „Winkel“ ist Art und Weise, Dinge zu tun. Wenn Sie die Dinge "richtig" machen wollen, tun Sie dies nicht, verwenden Sie eine Direktive. Dort, Disclaimer beiseite, hier ist, wie es geht:

Grundsätzlich, was Sie tun möchten, ist das DOM-Element eine ID basierend auf dem $ Index oder einen eindeutigen Wert in Ihrem ng-Repeat-Objekt geben. Hier verwende ich einfach $ index.

<div ng-repeat="friend in friends" id="friend_{{$index}}" ng-bind-html="doSomethingBadToTheDom('friend_' + $index)"> 
    {{friend.title}} 
</div> 

Dann in Ihrem Controller, fragen Sie einfach das DOM für das Element mit dieser ID:

$scope.doSomethingBadToTheDom = function(ele_id) { 
    var element = document.getElementById(ele_id); 
    element.innerHTML = "I'm abusing angular"; 
} 

Wir verwenden ng-bind-html hier, weil das Element DOM wird, wenn der Controller vorhanden Funktion wird ausgeführt, im Fall von etwas wie ng-init, wird es nicht.

Noch einmal, dies gilt gegen alles, was angular steht, also, wenn Sie versuchen, Winkel Best Practices zu folgen, tun Sie dies nicht.

Ich bin in Situationen geraten, in denen die Technik zwar nützlich ist, besonders wenn es sich um nicht-eckige Bibliotheken handelt, oder wenn der "eckige Weg" mehr Mühe macht, als er wert ist.