ottieni l'elemento originale da ng-click


204

Ho un elenco di elementi a mio avviso con ng-clickallegati:

<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>

Sto gestendo gli eventi click nella foofunzione nella mia direttiva, passando $eventcome riferimento all'oggetto su cui è stato fatto clic, ma sto ottenendo un riferimento al imgtag anziché al litag. Quindi devo fare cose come questa per ottenere 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
       }
   })();

Esiste un modo semplice per ottenere il riferimento all'elemento a cui ng-clickè associato, senza eseguire operazioni DOM nella mia direttiva?

Risposte:


318

È necessario $event.currentTargetinvece di $event.target.


3
Grazie, funziona. È strano che la proprietà currentTarget nell'oggetto $ event sia impostata su null.
— Ozrix,

2
Questo è decisamente strano ... se si registra l'oggetto $ event, $ event.currentTarget sembra essere nullo. Tuttavia, se si registra il riferimento $ event.currentTarget, mostra l'elemento corretto.
— richardaday,

6
Di solito lo userò var elem = $event.currentTarget || $event.srcElement. È sempre stato più amichevole per la navigazione incrociata, eppure non so se sia più necessario.
— WebWanderer,

12
console.log mostra oggetti mutabili profondi nell'ultimo stato di esecuzione, non nello stato in cui è stato chiamato console.log. vedi stackoverflow.com/questions/22059811/...
— Tivie

13

Non una risposta diretta a questa domanda, ma piuttosto alla "questione" di $event.currentTargetapparentemente essere impostato su null.

Ciò è dovuto al fatto che console.log mostra oggetti mutabili profondi nell'ultimo stato di esecuzione, non nello stato in cui è stato chiamato console.log.

Puoi controllare questo per ulteriori informazioni: le chiamate consecutive a console.log producono risultati incoerenti

Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.