Bootstrap- highlight Active and Angular directive

Question

I am trying to make selected item on Bootstrap navbar highlighted. 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 remove class="nav navbar-nav navbar-left". Otherwise, it's not getting into the directive. Any suggestions?

Thanks

Answer 1

I guess you want to listen clicks on list items (tag li) in the component and update its classes. Try to use event delegation – if you are using jQuery, just add extra selector into 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");
            });
         }
    };
});