我正在尝试构建一个应用程序，并且正在使用 bootstrap ui 来使用 Accordion 和 datepicker。
但是，当我尝试通过 ng-route 模块添加路由时，ui 部分停止工作。
如果没有路由部分，我的 ng-app 的定义如下所示:
var myApp= angular.module('myApp', ['ui.bootstrap']);
在 angular tutorial他们说要使用路由的东西，我必须像这样放置 ng-app 定义:
var myApp= angular.module('myApp', [
'ngRoute',
'Controllers'
]);
所以结合起来应该是这样的:
var myApp = angular.module('myApp', [
'ngRoute',
'Controllers',
'ui.bootstrap'
]);
还是我错了？因为像这样，行不通。
index.html 文件如下所示:
!DOCTYPE html>
<html ng-app='myApp'>
<head>
<script src="lib/angular/angular.js"></script>
<script src="lib/angular/angular-route.js"></script>
<script src="js/app.js"></script>
<script src="js/controllers2.js"></script>
<script src="ui-bootstrap-tpls-0.9.0.js"></script>
<link rel="stylesheet" href="css/bootstrap-3.1.1-dist/css/bootstrap.css">
<link rel="stylesheet" href="css/app.css">>
</head>
<body>
<div ng-view></div>
</body>
</html>
controllers2.js 还没有定义任何 Controller :
var Controllers= angular.module('Controllers', []);
Controllers.controller('firstCtrl', ['$scope', '$http','$routeParams',
function ($scope, $http) {
}]);
Controllers.controller('secondCtrl', ['$scope', '$routeParams',
function($scope, $routeParams) {
}]);
app.js 处理路由部分:
var myApp = angular.module('myApp', [
'ngRoute',
'Controllers',
'ui.bootstrap'
]);
myApp.config(['$routeProvider',
function($routeProvider) {
$routeProvider.
when('/first', {
templateUrl: 'first.html',
controller: 'firstCtrl'
}).
when('/second', {
templateUrl: 'second.html',
controller: 'secondCtrl'
}).
otherwise({
redirectTo: '/first'
});
}]);
first.html 和 second.html 也不做太多:
第一个.html:
<h1>first</h1>
<a href="#/second">second</a>
<accordion close-others="oneAtATime">
<accordion-group heading="Heading 1" is-open="true">
TSome Content
</accordion-group>
<accordion-group heading="Heading 2">
Some Content
</accordion-group>
</accordion>
第二个.html:
<h1>second</h1>
<a href="#/first">first</a>
first.html 应该看起来像这样，带有工作 Bootstrap :
最佳答案
随时调用angular.module('myApp', [])使用第二个参数，您正在创建一个模块。angular.module('myApp', [])//<-- 将创建一个名为 myApp 的新模块angular.module('myApp')//<-- 将查找 myApp 的现有实例模块。
如果您多次创建具有相同名称的实例，则第一个实例将被第二个实例覆盖。
关于angularjs - Angular : Routing while using Ui Bootstrap，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/23110913/