Bootstrap-突出显示Active和Angular指令

Question

我正在尝试突出显示Bootstrap导航栏上的选定项目.这是我的代码:

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

和指令:

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");
        });
    }
}

});

它只有在我删除class ="nav navbar-nav navbar-left"时才有效.否则,它没有进入指令.有什么建议？

谢谢

Answer 1

我想您想监听li组件中列表项（标签）的点击并更新其类。如果您使用的是 jQuery，请尝试使用事件委托\xe2\x80\x93，只需在调用中添加额外的选择器on：

\n\n

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

\n