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.

Asteroid

Answer 1

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

Bloater

Actually this whole div comes inside ng-repeat. So i cannot use event.id inside ng-click. I think. – Asteroid

Check out the jsFiddle link I just added to my answer for an example of using a parameter to ngClick within ngRepeat – Bloater

Answer 2

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.

Ownership

Your jsFiddle works fine in Chrome, but not in FireFox ? – Dockyard

Thanks for catching this. I've udpated the jsFiddle with a better solution using obj.target. – Ownership

I found out you can do obj.target.getAttribute("data") looks more readable IMO, js fiddle here: jsfiddle.net/zpApT – Vituperate

Note that if you have a custom data-attribute such as data-example-attr="whatever" then you would need to refer to it like so in your JS: obj.toElement.dataset.exampleAttr – Duumvir

@carmat's solution didn't seem to work on FF (worked on Chrome though), functional-rocking's obj.target.getAttribute("data-example-attr") worked for me with both Chrome && FF. – Bet

This solution was perfect for me. Thanks! – Ananthous

Answer 3

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.

Dockyard

Thanks Michiel. I've updated the jsFiddle to address this. I'm using the more universal obj.target property to grab attributes now. – Ownership

Yes Brett, I agree it's better to use target, updating my code, Thanks! – Dockyard