uzyskaj oryginalny element z ng-kliknięcia


204

Mam listę elementów w moim widoku z ng-clickdołączonymi do nich:

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

Obsługuję zdarzenia kliknięcia w foofunkcji w mojej dyrektywie, przekazując $eventjako odwołanie do obiektu, który został kliknięty, ale otrzymuję odwołanie do imgtagu, a nie litagu. Następnie muszę zrobić takie rzeczy, aby uzyskać 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
       }
   })();

Czy istnieje prosty sposób uzyskania odniesienia do elementu, który ng-clickjest związany, bez wykonywania operacji DOM w mojej dyrektywie?

Odpowiedzi:


317

Potrzebujesz $event.currentTargetzamiast $event.target.


3
Dzięki, działa. Dziwne, że właściwość currentTarget w obiekcie zdarzenia $ ma wartość null.
Ozrix

2
To zdecydowanie dziwne ... jeśli zalogujesz obiekt $ event, $ event.currentTarget wygląda na zero. Jeśli jednak zarejestrujesz odwołanie $ event.currentTarget, wyświetli on poprawny element.
richardaday

6
Zwykle użyję var elem = $event.currentTarget || $event.srcElement. Zawsze był bardziej przyjazny dla przeglądarek, ale nie wiem, czy jest to konieczne.
WebWanderer

12
console.log pokazuje głęboko zmienne obiekty w ostatnim stanie wykonania, a nie w stanie, w którym wywołano console.log. patrz stackoverflow.com/questions/22059811/…
Tivie

13

Nie bezpośrednia odpowiedź na to pytanie, ale raczej na „kwestię” $event.currentTargetnajwyraźniej zerową.

Wynika to z faktu, że console.log pokazuje głęboko zmienne obiekty w ostatnim stanie wykonania, a nie w stanie, w którym wywołano console.log.

Możesz to sprawdzić, aby uzyskać więcej informacji: Kolejne połączenia z plikiem console.log dają niespójne wyniki

Korzystając z naszej strony potwierdzasz, że przeczytałeś(-aś) i rozumiesz nasze zasady używania plików cookie i zasady ochrony prywatności.
Licensed under cc by-sa 3.0 with attribution required.