Bootstrap 4 选项卡在 AngularJS 中中断

Question

我在使用带有药丸的引导选项卡时发现：

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

破坏 Angular 应用程序，使其导航回加载第一个选项卡并选择第一个默认药丸的页面。

我尝试添加：

_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：

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

它可以解决所有问题！