Angular

Question

我在使用带药片的bootstrap标签时发现：

<a class="nav-link" id="tabItem" data-toggle="pill" href="#tabItem"> example </a> 

打破角度应用程序，导致它导航回加载第一个标签页并选择第一个默认药丸的页面。

我尝试添加：

_target="self"

...添加此修复仅针对前四次点击导航，然后再次中断。当我检查页面时，我发现“活动”类永远不会被清除，而这已被设置。

我也尝试添加：

"dependencies": {
     "angular1-ui-bootstrap4": "2.4.22"
 }

通过npm，但创建布局和修改一些预先设计的行为所需的工作量不值得我花时间。

找到最小代码，紧凑的解决方案是一条漫长的道路，但我发布这个问题是为了帮助其他人。

Answer 1

我通过在angular中添加一个自定义指令来修复此行为，该指令删除旧的活动类并显示单击的选项卡：

//
// when bootstrap adds the # to pills it ruins everything!!
// fix that with this:
//
app.directive('tabFix', function () {
    return function (scope, element, attrs) {
        $(element).click(function (event) {
        $(this).siblings("a").removeClass('active');           
        event.preventDefault();
        $(this).tab('show');         
        });        
    }
});

然后调用该指令，将tab-fix添加到anchor元素：

<a class="nav-link" id="tabItem" data-toggle="pill" href="#tabItem" tab-fix> example </a> 

它修复了一切！