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

Question

在我的项目中，我将 Bootstrap 选项卡与 AngularJS 和 angular-form-builder 一起使用：

            <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 层嵌套视图（通过 UI - 路由器）

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

亲切的问候！

Answer 1

Bootstrap 选项卡无法在 AngularJS 中原生使用，而且您的 JQuery 显然也无法正常工作。在 Angular 项目中使用 JQuery 修改 DOM 通常是不好的做法，您应该尝试 Angular 方式.这意味着使用正确 inject/update DOM.

的指令

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

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

Bootstrap Tabs do not work with AngularJS/ Angular-Form-Builder

javascript

tabs

typeerror

twitter-bootstrap

angularjs