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）的点击并更新其类。尝试使用event delegation - 如果您使用的是jQuery，只需在on调用中添加额外的选择器：

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

          });
      }
   }
});

see this link

Bootstrap-突出显示Active和Angular指令

2 个答案: