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

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>

我如何运行我的 Javascript 在 main.html 路线中，更具体地说，如何使 Bootstrap 活动选项卡脚本正常工作？

Answer 1

问题是 AngularJS 不能很好地与 Bootstrap 的默认 JS 一起播放。根据另一位开发人员的建议，我将 Bootstrap 的 JS 替换为 ui-bootstrap. Following the documentation there on tabs, I got my app working! Here's a good resource on the issue.

Answer 2

如果使用 bootstrap 尝试 angular-bootstrap 它将 bootstraps 组件包装在 angular 指令中以创建您将使用的选项卡组件他们的选项卡组件指令是一个 plunker:

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

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

祝你好运

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

How do I access Javascript elements within my Angular ng-view using $routeProvider?

html

javascript

twitter-bootstrap

angularjs

angularjs-routing