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.