引导选项卡不适用于 AngularJS/Angular-Form-Builder答案

【问题标题】：Bootstrap Tabs do not work with AngularJS/ Angular-Form-Builder引导选项卡不适用于 AngularJS/Angular-Form-Builder
【发布时间】：2015-10-10 22:58:43
【问题描述】：

在我的项目中，我使用带有 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 - 路由器）

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

亲切的问候！

【问题讨论】：

标签： javascript angularjs twitter-bootstrap tabs typeerror

【解决方案1】：

Bootstrap 选项卡无法与 AngularJS 一起使用，而且您的 JQuery 显然也无法正常工作。在 Angular 项目中使用 JQuery 修改 DOM 通常是不好的做法，您应该尝试Angular 方式。这意味着使用正确注入/更新 DOM 的指令。

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

【讨论】：

但由于某种原因，这种组合（Angular + Bootstrap 选项卡）在用作独立应用程序时工作得很好。只有当我将它作为整个项目的一部分（通过 ui-router 作为模板）时才会发生错误。
是的...这是因为由于各种原因，使用 JQuery 修改 Angular 项目中的 DOM 元素并不能始终如一地工作。这正是它被认为是不好的做法的原因。
哦，我明白了。由于我只有 3 个选项卡而且它们非常小，我正在考虑使用 ng-show/hide。