【发布时间】：2019-03-26 17:49:15
【问题描述】：
我已将ui.bootstrap 添加到我的控制器中：
angular.module('myApp', ['ui.bootstrap']).controller('ClientController', function($scope, $uibModal, ClientService) {});
我也将bootstrap-tpls 添加到我的index.html 文件中。
在 index.html 中，有一个带有按钮的导航栏。单击时，它应该显示与上述控制器相关的.html，该控制器隐藏在<div ng-view></div>中。
然而，当点击它时，它什么也不做 - 不显示任何 html 页面。此外，它不显示与另一个控制器相关的 html 页面，而不是 ClientController。
删除['ui.bootstrap'] 并单独留下angular.module('myApp') 使ng-view 可见但抛出（如预期的那样，我假设）错误：
“未知提供者：$uibModalProvider
为什么ng-view 没有在模块表中设置ui.bootstrap 运行？
编辑：
导航栏：
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">App</a>
</div>
<ul class="nav navbar-nav">
<li class="active"><a href="#/">Main</a></li>
<li><a href="#/client">Client</a></li>
<li><a href="#/admin">Admin</a></li>
</ul>
</div>
</nav>
<div style="
margin-bottom: 30%;
margin-right: 20%;
margin-left: 20%;
margin-top: 10%;"
ng-view></div>
app.js：
'use strict';
var app = angular.module("myApp", ['ngRoute']);
app.config(['$routeProvider', function($routeProvider) {
$routeProvider
.when("/client", {
templateUrl : "client",
controller : "ClientController as cCtrl"
})
.when("/admin", {
templateUrl : "admin",
controller : "AdminController as aCtrl"
})
}]);
编辑 2：
将 'ui.bootstrap' 移动到 app.js 并在创建控制器时使用 app 变量并没有解决问题 - 出现错误：
未知提供者：$uibModalProvider
现在代码如下：
app.js：
var app = angular.module("myApp", ['ngRoute', 'ui.bootstrap']);
客户端控制器：
app.controller('ClientController', function($scope, $uibModal, ClientService) {})
编辑 3：
脚本标签：
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.4/angular.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.7/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.7/angular-route.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.11.0/ui-bootstrap.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.11.0/ui-bootstrap-tpls.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="static/js/app.js"></script>
<script src="static/js/controller/AdminCtrl.js"></script>
<script src="static/js/service/AdminService.js"></script>
<script src="static/js/controller/ClientCtrl.js"></script>
<script src="static/js/service/ClientService.js"></script>
<link rel="stylesheet" href="static/css/styles.css">
<meta charset="UTF-8">
</head>
【问题讨论】：
-
您的第二个错误是因为您将
$uibModal注入到您的控制器中，该控制器是ui.bootstrap模块的一部分。通过删除它，它找不到注入的服务/提供者。至于第一个问题，您需要使用导航栏发布代码。他们通常有锚链接，可以更改 url、重定向您并更改ng-view中的内容。 -
@AlekseySolovey 我已经用 app.js 和 index.html 代码更新了我的帖子。我看到我的第二个错误来自哪里。然而，我无法理解第一个问题——为什么这里什么都没有发生。控制台也没有错误。
-
问题是你可以创建一个像语法这样的新模块： angular.module('myapp',[]) 当你使用这个语法 angular.module('myapp') 访问同一个模块时，即没有方括号。但是，当您创建控制器时，您将再次定义您用作引导模块的模块。与其在创建控制器时添加 ui.bootstrap，不如将其添加为 app.js 中的另一个依赖项 var app = angular.module("myApp", ['ngRoute','ui.bootstrap']);然后使用此 app 变量将控制器创建为 app.controller();
-
@GauravSingh 它没有帮助。现在有：“未知提供者：$uibModalProvider
-
ui-bootstrap-tpls 的版本？你能按脚本标签的顺序添加 index.html 吗？
标签： html angularjs angular-bootstrap