get original element from ng-click
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?
You need $event.currentTarget
instead of $event.target
.
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: Consecutive calls to console.log produce inconsistent results