ui-boostrap $ modal导致错误:[$ injector:unpr]

时间:2015-05-24 19:48:32

标签: angularjs angular-ui-bootstrap

我是angularjs和ui-bootstrap 13的新手,需要一些帮助。

我从the angularjs注射器得到了一个未解决的问题,无法找出原因。

模块定义如下所示:

var app = angular.module('MobileCOP', [
"ngRoute",
"ngTouch",
"mobile-angular-ui",
"ui.bootstrap"]);

控制器如下所示:

app.controller('CDRserver',['$rootScope','$scope','$location','serverList','$modal',

    function($rootScope, $scope, $location, serverList, $modal ){

我需要做的就是导致错误是将$ modal注入控制器。我没有在代码中引用模态,只是将模态服务添加到控制器会导致问题。删除服务后,错误将停止。

我假设我错过了一些明显的东西。

编辑“根据请求显示控制器分配到html:

.when('/ cdrquery',{     templateUrl:'/ MobileCOP / tmpl / CDRlist.html',     控制器:'CDRList' })

错误:

[$injector:unpr] http://errors.angularjs.org/1.2.15/$injector/unpr?p0=%24templateRequestProvider%20%3C-%20%24templateRequest%20%3C-%20%24modal
z/<@http://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js:6:450
Zb/l.$injector<@http://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js:34:1
c@http://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js:33:83
Zb/q.$injector<@http://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js:35:57
c@http://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js:33:83
d@http://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js:33:300
Zb/q.$injector<@http://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js:35:75
c@http://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js:33:83
d@http://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js:33:300
f/<.instantiate@http://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js:33:464
Md/this.$get</<@http://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js:65:484
z/<.link@http://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular-route.min.js:7:248
J@http://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js:52:492
h@http://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js:46:28
ba/<@http://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js:45:200
Z/<@http://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js:46:431
q@http://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js:50:162
v@http://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular-route.min.js:6:357
Wd/this.$get</h.prototype.$broadcast@http://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js:110:279
l/<@http://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular-route.min.js:11:177
ve/e/l.promise.then/H@http://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js:96:513
ve/e/l.promise.then/H@http://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js:96:513
ve/f/<.then/<@http://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js:98:173
Wd/this.$get</h.prototype.$eval@http://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js:108:36
Wd/this.$get</h.prototype.$digest@http://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js:105:323
Wd/this.$get</h.prototype.$apply@http://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js:108:368
g@http://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js:71:118
C@http://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js:75:241
re/</y.onreadystatechange@http://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js:76:280
<ng-view class="app-content ng-scope">

加载脚本代码:

<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular-route.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular-touch.min.js"></script>

<script src="/MobileCOP/libs/mobile-angular-ui.min.js"></script>
<script src="/MobileCOP/libs/ui-bootstrap-0.13.0.min.js"></script>
<!-- Required to use $touch, $swipe, $drag and $translate services -->
<script src="/MobileCOP/libs/mobile-angular-ui.gestures.min.js"></script>
<script src="/MobileCOP/libs/xml2json.min.js"></script>

2 个答案:

答案 0 :(得分:3)

It appears that you are not using a template enabled version of the ui-bootstrap libraries. From the ui-bootstrap FAQ:

The dist files with the -tpls- in their name come with the templates bundled inside $templateCache . You can check how this bundling works by inspecting this file. The important point here is that templates are part of the distribution file so you don't need to download them separately. Also, those templates are pre-loaded with JS file so a browser won't request them on run-time.

bottom line, for template enabled modules like modal to work, you need to be loading the script ui-bootstrap-tpls-0.13.0.js.

The error you are getting is coming from the templateRequestProvider when it looks for a template for $modal that isn't in the template cache.

答案 1 :(得分:0)

确定清除了问题.. ui-bootstrap-tpls-0.13.0.js与angularjs 1.2.15不兼容。升级到1.3.14,错误消失了。