Bootstrap-突出显示Active和Angular指令

Question

我试图使选定的项目在引导导航栏上突出显示。下面是我的代码:

<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，只需在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

使用此代码。也许它能帮助你……

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

查看此链接