Holen Sie sich das Originalelement von ng-click

204

Ich habe eine Liste von Elementen in meiner Ansicht mit ng-clickangehängten Elementen :

<ul id="team-filters">
    <li ng-click="foo($event, team)" ng-repeat="team in teams">
         <img src="{{team.logoSmall}}" alt="{{team.name}}" title="{{team.name}}">
    </li>
</ul>

Ich verarbeite die Klickereignisse in der fooFunktion in meiner Direktive und übergebe sie $eventals Verweis auf das Objekt, auf das geklickt wurde. Ich erhalte jedoch einen Verweis auf das imgTag und nicht auf das liTag. Ich muss dann solche Sachen machen, um das zu bekommen li:

$scope.foo = function($event, team) {
   var el = (function(){
       if ($event.target.nodeName === 'IMG') {
          return angular.element($event.target).parent(); // get li
       } else {
          return angular.element($event.target);          // is li
       }
   })();

Gibt es eine einfache Möglichkeit, den Verweis auf das ng-clickgebundene Element abzurufen, ohne DOM-Operationen in meiner Direktive auszuführen?

angularjs angularjs-directive Ozrix
quelle

Antworten:

317

Sie brauchen $event.currentTargetstatt $event.target.

Ingenieur
quelle
3
Danke, es funktioniert. Es ist seltsam, dass die Eigenschaft currentTarget im $ event-Objekt auf null gesetzt ist.
Ozrix
2
Dies ist definitiv seltsam ... Wenn Sie das $ event-Objekt protokollieren, scheint $ event.currentTarget null zu sein. Wenn Sie jedoch die Referenz $ event.currentTarget protokollieren, wird das richtige Element angezeigt.
Richardaday
6
Ich werde normalerweise verwenden var elem = $event.currentTarget || $event.srcElement. Es war schon immer Cross-Browse-freundlich, aber ich weiß nicht, ob es noch nötig ist.
WebWanderer
12
console.log zeigt tief veränderbare Objekte im letzten Ausführungsstatus an, nicht in dem Zustand, in dem console.log aufgerufen wurde. siehe stackoverflow.com/questions/22059811/…
Tivie
13

Keine direkte Antwort auf diese Frage, sondern auf das "Problem", $event.currentTargetanscheinend auf Null gesetzt zu werden.

Dies liegt an der Tatsache, dass console.log im letzten Ausführungsstatus tief veränderbare Objekte anzeigt, nicht in dem Zustand, in dem console.log aufgerufen wurde.

Sie können dies überprüfen, um weitere Informationen zu erhalten: Aufeinanderfolgende Aufrufe von console.log führen zu inkonsistenten Ergebnissen

Tivie
quelle