1

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

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

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

我尝试添加：

_target="self"

...添加此仅修复前四次单击的导航，然后再次中断。当我检查页面时，我看到设置了“活动”类永远不会被清除。

我还尝试添加：

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

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

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

4

1 回答 1

3

我通过在 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>

它解决了一切！

于 2017-12-05T00:33:25.780 回答