Bootstrap 4 tabs在Angularjs中断裂

Question

我在使用Bootstrap Tab与药丸时发现：

<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添加到锚元素上：

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

它修复了所有内容！