Bootstrap 4 个制表符插入 AngularJS

Question

我发现在将 bootstrap 选项卡与药丸一起使用时，:

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

中断 angular 应用程序，导致它导航回加载第一个选项卡并选择第一个默认药丸的页面。

我尝试添加：

_target="self"

...添加此修复导航仅用于前四次点击，然后再次中断。当我检查页面时，我发现 'active' class 永远不会被设置为清除。

我也试过添加：

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

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

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

Answer 1

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

//
// 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>

它解决了所有问题！

Bootstrap 4 个制表符插入 AngularJS

Bootstrap 4 tabs break in AngularJS

angularjs

angular-ui-bootstrap

bootstrap-4

angular1.6