angularjs - get original element from ng-click

Question

I have a list of items in my view with ng-click attached to them:

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

I'm handling the click events in the foo function in my directive, passing $event as a reference to the object that's been clicked, but I'm getting a reference to the img tag, rather than the li tag. I then have to do stuff like this to get the 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
       }
   })();

Is there a simple way to get the reference to the element that ng-click is bound to, without doing DOM operations in my directive?

Answer 1

You need $event.currentTarget instead of $event.target.