Question

我正在创建一个Bootstrap / Angular应用程序，并使用$ routeProvider呈现视图，并希望在其中一个视图中包含选项卡。但是，活动选项卡Bootstrap功能不会切换。这是我的index.html，app.routes.js和main.html的样子：

的index.html

<!doctype html>
<head>...</head>
<body ng-app="app">
 <nav>...</nav>
  <div ng-view=""></div>
...
 <script src="Scripts/jquery-1.9.1.min.js"></script>
 <script src="Scripts/angular.min.js"></script>
 <script src="Scripts/angular-route.min.js"></script>
 <script src="Scripts/bootstrap.min.js"></script>
 <script src="assets/js/custom.js"></script>
</body>

app.routes.js

var app = angular.module('app');

app.config(function ($routeProvider) {
    $routeProvider
        .when('/', {
            templateUrl: 'components/main/main.html',
            controller: 'MainCtrl',
            controllerAs: 'main'
        })
        ...

main.html中

<ul class="nav nav-tabs">
    <li class="active"><a data-toggle="tab" href="#tab1">Tab1</a></li>
    <li><a data-toggle="tab" href="#tab2">Tab2</a></li>
    <li><a data-toggle="tab" href="#tab3">Tab3</a></li>
    <li><a data-toggle="tab" href="#tab4">Tab4</a></li>
</ul>

<div class="container">
    <div class="tab-content">
        <div id="tab1" class="tab-pane fade in active">
            ...
        </div>

        <div id="tab2" class="tab-pane fade">
            ...
        </div>

        <div id="tab3" class="tab-pane fade">
            ...
        </div>

        <div id="tab4" class="tab-pane fade">
            ...
        </div>
    </div>
</div>

如何在main.html路径中运行我的Javascript，更具体地说，让Bootstrap活动标签脚本工作？

Answer 1

问题是AngularJS与Bootstrap的默认JS不兼容。根据另一位开发人员的建议，我用ui-bootstrap取代了Bootstrap的JS。按照选项卡上的文档，我的应用程序正常运行！ Here's a good resource on the issue.

Answer 2

如果使用bootstrap尝试angular-bootstrap，它会在angular指令中包装bootstraps组件来创建一个tab组件，你将使用它们的tab组件指令这里是一个plunker：

http://embed.plnkr.co/TMN3KNlS4Dv90SvbTQKJ/

文档http://angular-ui.github.io/bootstrap/#/tabs

祝你好运

如何使用$ routeProvider访问Angular ng-view中的Javascript元素？

2 个答案: