get original element from ng-click

AngularjsAngularjs Directive

Angularjs Problem Overview


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?

Angularjs Solutions


Solution 1 - Angularjs

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

Solution 2 - Angularjs

Not a direct answer to this question but rather to the "issue" of $event.currentTarget apparently be set to null.

This is due to the fact that console.log shows deep mutable objects at the last state of execution, not at the state when console.log was called.

You can check this for more information: https://stackoverflow.com/questions/22059811/consecutive-calls-to-console-log-produce-inconsistent-results

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionOzrixView Question on Stackoverflow
Solution 1 - AngularjsEngineerView Answer on Stackoverflow
Solution 2 - AngularjsTivieView Answer on Stackoverflow