我正在尝试使用 Angular UI Bootstrap module ,特别是 Modal 插件。 我的应用程序文件夹的结构如下:
- 应用程序
- 时间表
- scheda.html
- schedacontroller.js
- app.js
- 时间表
- CSS
- ...
- index.html
这是app.js,主应用程序文件:
// created the module GasistaFelice
// also included ngRoute for all our routing needs
angular.module('ngGasistaFelice', [])
.run(function($rootScope) {
$rootScope.gasID = "10"; //default value
});
angular.module('ngGasistaFelice', ['ui.bootstrap']);
var GasistaFelice = angular.module('ngGasistaFelice', ['ngRoute']);
GasistaFelice.config(['$routeProvider',function($routeProvider) {
$routeProvider
// route for the home page
.when('/', {
templateUrl : 'app/ordinare/ordinare.html',
controller : 'orderController'
})
// route for the paniere page
.when('/:id/gasmember/:id/basket', {
templateUrl : 'app/paniere/paniere.html',
controller : 'paniereController'
})
// route for the scheda page
.when('/:id/profile', {
templateUrl : 'app/scheda/scheda.html',
controller : 'schedaController'
})
// route for the conto page
.when('/:id/gasmember/:id/cash', {
templateUrl : 'app/conto/conto.html',
controller : 'contoController'
})
.otherwise({
redirectTo: '/'
});
}]);
异常(exception)......
这是我想在其中放置 Modal 插件的页面的 Controller :
var app = angular.module('ngGasistaFelice', ['ui.bootstrap']);
app.controller('schedaController', function ($scope, $routeParams, $modal, $log, $http) {
var id = $routeParams.id;
// --- URL finale ---
//var url = 'http://localhost:8000/gasistafelice/api/v1/person/id/?format=json';
//URL di prova
$scope.items = ['item1', 'item2', 'item3'];
$scope.open = function (size) {
var modalInstance = $modal.open({
templateUrl: 'myModalContent.html',
controller: ModalInstanceCtrl,
size: size,
resolve: {
items: function () {
return $scope.items;
}
}
});
modalInstance.result.then(function (selectedItem) {
$scope.selected = selectedItem;
}, function () {
$log.info('Modal dismissed at: ' + new Date());
});
};
当我加载包含 schedaController 的页面时,我不断收到此错误:
Error: [$injector:unpr] h ttp://errors.angularjs.org/1.2.16/$injector/unpr?p0=%24routeParamsProvider%20%3C-%20%24routeParams
at Error (native)
at http://localhost/GasistaFelice2_angular/js/angular.min.js:6:450
at http://localhost/GasistaFelice2_angular/js/angular.min.js:35:431
at Object.c [as get] (http://localhost/GasistaFelice2_angular/js/angular.min.js:34:13)
at http://localhost/GasistaFelice2_angular/js/angular.min.js:35:499
at c (http://localhost/GasistaFelice2_angular/js/angular.min.js:34:13)
at d (http://localhost/GasistaFelice2_angular/js/angular.min.js:34:230)
at Object.instantiate (http://localhost/GasistaFelice2_angular/js/angular.min.js:34:394)
at http://localhost/GasistaFelice2_angular/js/angular.min.js:66:112
at http://localhost/GasistaFelice2_angular/js/angular.min.js:53:14
谢谢
最佳答案
您使用不同的所需模块多次定义 angular.module('ngGasistaFelice', [])
(在 module
函数的第二个参数内):
angular.module('ngGasistaFelice', [])
angular.module('ngGasistaFelice', ['ui.bootstrap']);
var GasistaFelice = angular.module('ngGasistaFelice', ['ngRoute']);
var app = angular.module('ngGasistaFelice', ['ui.bootstrap']);
...具体来说,最后一个是您尝试使用 ngRoute 的那个,但您甚至还没有在那里注入(inject)它。
更好的解决方案是定义一次,例如:
var GasistaFelice = angular.module('ngGasistaFelice', [
'ui.bootstrap',
'ngRoute'
]);
然后你就可以做你想做的事情了:
GasistaFelice.controller(...);
或者,如果您在另一个文件(或作用域)中需要它并且 GasistaFelice
尚未定义,您可以通过调用 angular.module
来获取它 不使用传递所需的依赖项,例如:
var app = angular.module('ngGaistaFelice');
app.controller(...);
关于Angularjs - 错误 : [$injector:unpr],我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/24168583/