javascript - Bootstrap 选项卡不适用于 AngularJS/Angular-Form-Builder

Question

在我的项目中，我将 Bootstrap Tabs 与 AngularJS 和 angular-form-b​​uilder 结合使用:

            <ul class="nav nav-tabs" role="tablist">
                <li role="presentation" class="active"><a href="#project" aria-controls="projekt" role="tab" data-toggle="tab">Projekt</a></li>
                <li role="presentation"><a href="#project2" aria-controls="podglad" role="tab" data-toggle="tab">Podgląd</a></li>
                <li role="presentation"><a href="#json" aria-controls="json" role="tab" data-toggle="tab">Json</a></li>
            </ul>

           <div class="tab-content">
                <div role="tabpanel" class="tab-pane fade in active" id="project">
           ...
           ...

每当我尝试在选项卡之间移动时，我都会收到错误

Uncaught TypeError: $(...).tab is not a function(anonymous function) @ VM4062:4b.event.dispatch @ angular-file-upload.js:1331b.event.add.v.handle @ angular-file-upload.js:1331triggerMouseEvent @ angular-file-upload.js:1331tapClick @ angular-file-upload.js:1331tapMouseUp @ angular-file-upload.js:1331

当然我没有忘记处理标签:

 $('.nav-tabs a').click(function (e) {
    e.preventDefault();
    $(this).tab('show');
})

我认为还值得一提的是我的应用程序有 3 层嵌套 View (通过 UI - 路由器)

过去有没有人偶然发现过类似的问题？我的所有库都已正确加载到项目中(我相信顺序正确，应用程序的其他部分按预期工作)。

亲切的问候!

Answer 1

Bootstrap 选项卡不能在 AngularJS 中原生使用，而且你的 JQuery 显然也不能正常工作。在 Angular 项目中使用 JQuery 修改 DOM 通常是不好的做法，您应该尝试以Angular 方式来做事。这意味着使用正确注入(inject)/更新 DOM 的指令。

由于您使用的是 Bootstrap，您应该考虑使用 ui-bootstrap在你的项目中。它已经具有您正在寻找的功能。或者，您可以编写自己的指令来正确修改选项卡 active 类。