получить оригинальный элемент от 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 в моей директиве?

Ответы:


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 приводят к противоречивым результатам

Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.