javascript - AngularJS fire function on-click anchor links -

i'm hoping can me achieve clean , effective way of firing function when anchor links, specific css class, clicked.

i using ng-click feel bit of messy , unmaintainable solution: mean adding ng-click each of anchor links want track.

my navigation links this:

<li id="item1" class="foo"><a href="#/item1">click me</a></li> 

i'd emulate functionality of ng-click in similar manner following jquery stubb (which doesn't seem work in configuration):

$('.foo a').on('click', function(){     //do code  }); 

tl;dr

i'd angularjs way execute function when element specific css class clicked.

please let me know if haven't described enough.

thanks in advance,

johnd

you write directive , apply root element.

demo

<div ng-app="app" foo-dir>     <li id="item1" class="foo"><a href="#/item1">click me 1</a>      </li>     <li id="item2" class="foo"><a href="#/item2">click me 2</a>      </li> </div> 

javascript

var app = angular.module("app", []);  app.directive("foodir", function () {     return {         link: function ($scope) {             $(".foo a").on("click", function (event) {                 alert($(this).html());             });         }     } });