получить оригинальный элемент от ng-click

204

У меня есть список предметов на мой взгляд с ng-clickприкрепленными к ним:

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

Я обрабатываю события щелчка в fooфункции в моей директиве, передавая $eventссылку на объект, по которому щелкнули, но я получаю ссылку на imgтег, а не на liтег. Затем я должен сделать что-то вроде этого, чтобы получить 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
       }
   })();

Есть ли простой способ получить ссылку на элемент, с которым ng-clickсвязан, без выполнения операций DOM в моей директиве?

angularjs angularjs-directive Ozrix
источник

Ответы:

318

Вам нужно $event.currentTargetвместо $event.target.

инженер
источник
3
Спасибо, это работает. Странно, что свойство currentTarget в объекте $ event имеет значение null.
Озрикс
2
Это определенно странно ... если вы регистрируете объект $ event, $ event.currentTarget выглядит равным нулю. Однако если вы зарегистрируете ссылку на $ event.currentTarget, она покажет правильный элемент.
Richardaday
6
Я обычно буду использовать var elem = $event.currentTarget || $event.srcElement. Это всегда было более удобным для просмотра, но я не знаю, нужно ли это больше.
WebWanderer
12
console.log показывает глубоко изменяемые объекты в последнем состоянии выполнения, а не в состоянии, когда вызывался console.log. см. stackoverflow.com/questions/22059811/…
Tivie
13

Не прямой ответ на этот вопрос, а скорее на «вопрос», по- $event.currentTargetвидимому, будет нулевым.

Это связано с тем, что console.log показывает глубоко изменяемые объекты в последнем состоянии выполнения, а не в состоянии, когда вызывался console.log.

Вы можете проверить это для получения дополнительной информации: последовательные вызовы console.log приводят к противоречивым результатам

Tivie
источник