AngularJS，链接单击不起作用

Question

This might sound like a stupid question but I can't seem to figure out the answer, I'm studying angularjs these days and I've successfully generated the page and they have links that looks like this.

<div ng-repeat="evsi in evz" class="ng-scope">
<a href="#" likey="{{evsi.key}}" id="sideli" class="ng-binding">Link text</a>
</div>

What I want to do is when the link is clicked I need to retrive the likey value attached to it and pass it where an event is triggered.

So I used the following code

$('#sideli').on('click', function(){
    var linkkey = $(this).data('likey');
});

However this doesn't get the likey value i needed, Even when i set up a simple alert event to check whether the link is clicked the alert doesn't show up. Where is the error and how can I fix it?

Thanks

Answer 1

in you html:

<a ng-click="doWhatYouWant(evsi)" likey="{{evsi.key}}" 
           id="sideli" class="ng-binding" href="javascript:void(0)">Link text</a>

in your controller:

$scope.doWhatYouWant = function(evsi){
   console.log(evsi.key);
}

Keep in mind you are using angular. There is no need to query for elements and bind a click event.

Answer 2

You could use ngClick for that.

<div ng-repeat="evsi in evz" class="ng-scope">
  <a href="#" ng-click="linkkey = evsi.key">Link text</a>
</div>

Answer 3

If you want to retrive value of attribute, use attr method:

$('#sideli').on('click', function(){
     var linkkey = $(this).attr('likey');
});

But better way is to use angular, as @Michael suggested.