6

我正在尝试构建一个应用程序，并且正在使用 bootstrap ui 来使用手风琴和 datepicker。但是，当我尝试通过 ng-route 模块添加路由时，ui 部分停止工作。

如果没有路由部分，我的 ng-app 的定义如下所示：

var myApp= angular.module('myApp', ['ui.bootstrap']);

在角度教程中，他们说要使用路由，我必须像这样放置 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 还没有定义任何控制器：

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 也不做太多： first.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 应该看起来像这样，带有工作引导程序：

在此处输入图像描述

4

4 回答 4

3

每当您angular.module('myApp', [])使用第二个参数调用时，您都在创建一个模块。

angular.module('myApp', [])//<-- 将创建一个名为的新模块myApp

angular.module('myApp')myApp//<-- 将查找模块的现有实例。

如果您多次创建具有相同名称的实例，则第一个实例将被第二个实例覆盖。

于 2014-04-16T13:54:35.810 回答
2

在尝试加载应用程序之前，您是否定义了“控制器”模块？如果不从依赖项中删除它：

var myApp = angular.module('myApp', [
  'ngRoute',
  'ui.bootstrap'
]);
于 2014-04-16T13:34:56.517 回答
1

控制器拼写错误？一个似乎是小写的，“控制器”，另一个是句子大小写的“控制器”。

无论如何，尝试在您的浏览器上调出调试器（在窗口系统上按 F12）并查看刷新页面时是否有任何错误消息写入控制台窗口（F5 或浏览器刷新按钮）。我发现当我的页面表现得很有趣时，控制台通常会给我一个提示。

于 2014-04-16T13:48:59.690 回答
0

就我而言，删除 ngAnimate 修复了 ui.bootstrap 的问题。

于 2015-03-26T19:58:45.247 回答