obtener elemento original de ng-click


204

Tengo una lista de elementos en mi vista con ng-clickadjuntos:

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

Estoy manejando los eventos de clic en la foofunción en mi directiva, pasando $eventcomo referencia al objeto en el que se ha hecho clic, pero obtengo una referencia a la imgetiqueta, en lugar de la lietiqueta. Luego tengo que hacer cosas como esta para obtener 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
       }
   })();

¿Hay una manera simple de obtener la referencia al elemento al que ng-clickestá vinculado, sin realizar operaciones DOM en mi directiva?

Respuestas:


318

Necesitas en $event.currentTargetlugar de $event.target.


3
Gracias, esta funcionando. Es extraño que la propiedad currentTarget en el objeto $ event esté establecida en nulo.
— Ozrix

2
Esto es definitivamente extraño ... si registra el objeto $ event, $ event.currentTarget parece ser nulo. Sin embargo, si registra la referencia $ event.currentTarget, muestra el elemento correcto.
— richardaday

66
Usualmente lo usaré var elem = $event.currentTarget || $event.srcElement. Siempre ha sido más amigable, pero no sé si es necesario.
— WebWanderer

12
console.log muestra objetos mutables profundos en el último estado de ejecución, no en el estado en que se llamó a console.log. ver stackoverflow.com/questions/22059811/…
— Tivie

13

No es una respuesta directa a esta pregunta, sino más bien al "problema" de $event.currentTargetaparentemente ser puesto a nulo.

Esto se debe al hecho de que console.log muestra objetos mutables profundos en el último estado de ejecución, no en el estado en que se llamó a console.log.

Puede verificar esto para obtener más información: las llamadas consecutivas a console.log producen resultados inconsistentes

Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.