如何使用 $routeProvider 访问 Angular ng-view 中的 Javascript 元素?
How do I access Javascript elements within my Angular ng-view using $routeProvider?
我正在创建一个 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 活动选项卡脚本正常工作?
问题是 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.
如果使用 bootstrap 尝试 angular-bootstrap 它将 bootstraps 组件包装在 angular 指令中以创建您将使用的选项卡组件他们的选项卡组件指令是一个 plunker:
http://embed.plnkr.co/TMN3KNlS4Dv90SvbTQKJ/
文档http://angular-ui.github.io/bootstrap/#/tabs
祝你好运
我正在创建一个 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 活动选项卡脚本正常工作?
问题是 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.
如果使用 bootstrap 尝试 angular-bootstrap 它将 bootstraps 组件包装在 angular 指令中以创建您将使用的选项卡组件他们的选项卡组件指令是一个 plunker:
http://embed.plnkr.co/TMN3KNlS4Dv90SvbTQKJ/
文档http://angular-ui.github.io/bootstrap/#/tabs
祝你好运