Getting attribute of element in ng-click function in angularjs

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.


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.


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


Addition to the answer of Brett DeWoody: (which is updated now)

var dataValue = obj.srcElement.attributes.data.nodeValue;

Works fine in IE(9+) and Chrome, but Firefox does not know the srcElement property. I found:

var dataValue = obj.currentTarget.attributes.data.nodeValue;

Works in IE, Chrome and FF, I did not test Safari.