Getting attribute of element in ng-click function in angularjs

Question

I have a span tag like below which call a function in the controller when clicked.

HTML

<div class="row" ng-repeat="event in events">     <div class="col-lg-1 text-center">         <span class="glyphicon glyphicon-trash" data={{event.id}} ng-click="deleteEvent()">         </span>     </div> </div> 

Controller

$scope.deleteEvent=function(){     console.log(this); } 

I need to get the value in data attribute in the controller function. I tried using this keyword and $event; neither one worked.

Please help.

Answer 1

Even more simple, pass the $event object to ng-click to access the event properties. As an example:

<a ng-click="clickEvent($event)" class="exampleClass" id="exampleID" data="exampleData" href="">Click Me</a> 

Within your clickEvent() = function(obj) {} function you can access the data value like this:

var dataValue = obj.target.attributes.data.value; 

Which would return exampleData.

Here's a full jsFiddle.

Answer 2

Try passing it directly to the ng-click function:

<div class="col-lg-1 text-center">     <span class="glyphicon glyphicon-trash" data="{{event.id}}"           ng-click="deleteEvent(event.id)"></span> </div> 

Then it should be available in your handler:

$scope.deleteEvent=function(idPassedFromNgClick){     console.log(idPassedFromNgClick); } 

Here's an example