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?

angularjs angularjs-directive

— Ozrix
źródło

Odpowiedzi:

317

Potrzebujesz $event.currentTargetzamiast $event.target.

— Inżynier
źródło

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

— Ozrix

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

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

— WebWanderer

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

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

— Tivie
źródło