Bootstrap-highlight Active and Angular Element

Question

I am trying to highlight the highlighted item in the Bootstrap navigation bar. Here is my code:

<ul class="nav navbar-nav navbar-left" top-bar> 

and directive:

 a.directive('topBar', function () { return { restrict: 'AE', link: function (scope, elem, attrs) { $(elem).on("click", function () { $(elem).find(".active").removeClass("active"); $(this).parent().addClass("active"); }); } } 

});

It only works if I delete class = "nav navbar-nav navbar-left". Otherwise, it does not fall into the directive. Any suggestions?

thanks

Answer 1

I think you want to listen for clicks on list items ( li tag) in the component and update its classes. Try using event delegation - if you are using jQuery, just add an extra selector to the on call:

 a.directive('topBar', function () { return { restrict: 'AE', link: function (scope, elem, attrs) { elem.on("click", "li", function (e) { elem.find(".active").removeClass("active"); $(this).addClass("active"); }); } }; }); 

Answer 2

use this code. maybe this will help you ...

 app.directive('topBar', function () { return { restrict: 'AE', link: function (scope, elem, attrs) { $(elem).on("click", function () { $(".active").removeClass("active"); $(elem).addClass("active"); }); } } }); 

see this link