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

I am creating an Bootstrap/Angular app and using $routeProvider to render the views, and want to have tabs within one of those views. However, the active tab Bootstrap functionality isn't toggling. Here's what my index.html, app.routes.js, and main.html look like:

我正在创建一个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>

How can I run my Javascript within the main.html route and more specifically get the Bootstrap active tab script working?

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

2 个解决方案

#1

The problem is that AngularJS doesn't play well with Bootstrap's default JS. Upon another developer's recommendation, I replaced Bootstrap's JS with ui-bootstrap. Following the documentation there on tabs, I got my app working! Here's a good resource on the issue.

问题是AngularJS与Bootstrap的默认JS不兼容。根据另一位开发人员的建议,我用ui-bootstrap替换了Bootstrap的JS。按照选项卡上的文档,我的应用程序正常运行!这是一个关于这个问题的好资源。

#2

If using bootstrap try angular-bootstrap it wraps bootstraps components in angular directives to create a tab component you'll be using their tab component directive here is a plunker:

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

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

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

Good luck

#1

#2