向控制器添加服务时出现未知提供者 [英] Unknown Provider when adding service to controller
问题描述
我创建了一个 Modal 服务，当我将该服务注入控制器时，我收到一条错误消息，内容为$Injector: unpr Unknown Provider".下面是我的代码.如果我遗漏了什么，请告诉我.
这是我目前拥有的服务.
'use strict';angular.module('myApp.services', []).factory('modalService', ['$scope', function($scope) {返回 {openMenuModal:函数(模板链接，窗口动画){var modalInstance = $modal.open({模板网址:模板链接，背景:'静态'，窗口类:窗口动画，控制器:函数($scope，$modalInstance){$scope.close = function() {$modalInstance.close();};},尺寸:'md'，范围:$范围，键盘:真的});}};}]);这是我设置的控制器.
angular.module('myApp.controllers', ['ui.bootstrap', 'ngAnimate']).controller('HomeCtrl', function($scope, $http, $modal, modalService) {$scope.opentheBook = modalService.openMenuModal('partials/Books.html', 'animated zoomIn');});这里是模态数据的模板 - Books.html
<div class="modalBox 动画淡入淡出"><button class="btn btn-danger pull-right" type="button" ng-click="" tooltip="Close"><i class="fa fa-times"></i><h1>标题</h1><p>描述</p><div class="next"><button class="btn btn-danger pull-right" type="button" tooltip="Close"><i class="fa fa-times"></i></button>这是我调用 openBook() 以使用来自 json 的信息打开模态的主主页
<ul><li ng-repeat="book in thing.Books" class="list-unstyled"><a ng-click="opentheBook" href="#"><h6>{{book.name}}</h6></a></li>json for Books 示例——在另一个名为 things 的数组中
书籍":[{"name": "书籍 1 的名称","description": "关于书的描述..."},{"name": "书名 2","description": "关于书的描述..."}]此错误是由 $injector 无法解析所需的依赖项造成的.要解决此问题，确保依赖项的定义和拼写正确.例如，以下代码将失败并显示您收到的相同错误 -$injector:unpr，如果 myService未定义:
angular.module('myApp', []).controller('MyController', ['myService', function (myService) {//用 myService 做一些事情}]);确保定义了每个依赖项将解决问题，如下所述.
angular.module('myApp', []).service('myService', function () {/* ... */}).controller('MyController', ['myService', function (myService) {//用 myService 做一些事情}]);所以回答你的问题，在你的情况下，你似乎缺少依赖
angular.module('myApp.controllers', ['ui.bootstrap', 'ngAnimate']).controller('HomeCtrl', function($scope, $http, $modal, modalService) {$scope.opentheBook = modalService.openMenuModal('partials/Books.html', 'animated zoomIn');});像这样注入modalService:
.controller('HomeCtrl', ['modalService', function($scope, $http, $modal, modalService) {}]);您还需要将 factory 模块更改为 angular.module('myApp.services', ['ui.bootstrap']) 并使用 $uibModal 因为 $modal 已被弃用.
angular.module('myApp', ['ui.bootstrap']).factory('modalService', ['$uibModal', function($uibModal) {返回 {openMenuModal:函数(模板链接，窗口动画){var modalObj = $uibModal.open({模板网址:模板链接，背景:'静态'，窗口类:窗口动画，控制器:函数($scope，$modalInstance){$scope.ok = 函数(id){//处理OK按钮点击$modalInstance.close();},$scope.cancel = function(){$modalInstance.dismiss('取消');}},尺寸:'md'，键盘:真的，解决: {一些数据:函数(){return '返回一些数据';}}});}};}]).controller('HomeCtrl', ['$scope','modalService', function($scope, modalService, someData) {$scope.dataFromService = someData;$scope.opentheBook = function(){modalService.openMenuModal('myModalContent.html', '动画放大');};}]);更新 1
如评论中所述，不要尝试将 $scope 注入您的工厂.这是我创建的一个 Plunker，它允许您通过调用工厂来打开一个模态.
http://plnkr.co/edit/G68NVYZlTqrIS0N2TKL4
I created a Modal service and when I injected the service into the controller, I am receiving an error that says "$Injector: unpr Unknown Provider". Here is my code below. Let me know if I am missing something.
This is the service I have so far.
'use strict';
angular.module('myApp.services', [])
.factory('modalService', ['$scope', function($scope) {
return {
openMenuModal: function(templateLink, windowAnimation) {
var modalInstance = $modal.open({
templateUrl: templateLink,
backdrop: 'static',
windowClass: windowAnimation,
controller: function($scope, $modalInstance) {
$scope.close = function() {
$modalInstance.close();
};
},
size: 'md',
scope: $scope,
keyboard: true
});
}
};
}]);
Here is the controller I have set up.
angular.module('myApp.controllers', ['ui.bootstrap', 'ngAnimate'])
.controller('HomeCtrl', function($scope, $http, $modal, modalService) {
$scope.opentheBook = modalService.openMenuModal('partials/Books.html', 'animated zoomIn');
});
Here is the template for the data in the modal - Books.html
<div ng-controller="HomeCtrl">
<div class="modalBox animated fadeIn">
<button class="btn btn-danger pull-right" type="button" ng-click="" tooltip="Close"><i class="fa fa-times"></i></button>
<h1>title</h1>
<p>description</p>
<div class="next">
<button class="btn btn-danger pull-right" type="button" tooltip="Close"><i class="fa fa-times"></i></button>
</div>
</div>
</div>
Here is the main home page where I am calling the openBook() to open the modal with the info from the json
<div class="Books">
<ul>
<li ng-repeat="book in thing.Books" class="list-unstyled"><a ng-click="opentheBook" href="#"><h6>{{book.name}}</h6></a></li>
</ul>
</div>
json for Books example --inside another array called things
"Books": [
{
"name": "Name of Book 1",
"description": "Description about book..."
},
{
"name": "Name of Book 2",
"description": "Description about book..."
}
]
This error results from the $injector being unable to resolve a required dependency. To fix this, make sure the dependency is defined and spelled correctly. For example, the following code will fail with the same error you received -$injector:unpr, if myService is not defined:
angular.module('myApp', [])
.controller('MyController', ['myService', function (myService) {
// Do something with myService
}]);
Making sure each dependency is defined will fix the problem, as noted below.
angular.module('myApp', [])
.service('myService', function () { /* ... */ })
.controller('MyController', ['myService', function (myService) {
// Do something with myService
}]);
So to answer your question, in your case you appear to be missing dependency
angular.module('myApp.controllers', ['ui.bootstrap', 'ngAnimate'])
.controller('HomeCtrl', function($scope, $http, $modal, modalService) {
$scope.opentheBook = modalService.openMenuModal('partials/Books.html', 'animated zoomIn');
});
To Inject modalService like so:
.controller('HomeCtrl', ['modalService', function($scope, $http, $modal, modalService) {
}]);
You also need to change up your factory module to angular.module('myApp.services', ['ui.bootstrap']) and use $uibModal since $modal is deprecated.
angular.module('myApp', ['ui.bootstrap'])
.factory('modalService', ['$uibModal', function($uibModal) {
return {
openMenuModal: function(templateLink, windowAnimation) {
var modalObj = $uibModal.open({
templateUrl: templateLink,
backdrop: 'static',
windowClass: windowAnimation,
controller: function($scope,$modalInstance){
$scope.ok = function(id){
//Process OK Button Click
$modalInstance.close();
},
$scope.cancel = function(){
$modalInstance.dismiss('cancel');
}
},
size: 'md',
keyboard: true,
resolve: {
someData: function () {
return 'Return some Data';
}
}
});
}
};
}])
.controller('HomeCtrl', ['$scope','modalService', function($scope, modalService, someData) {
$scope.dataFromService = someData;
$scope.opentheBook = function(){
modalService.openMenuModal('myModalContent.html', 'animated zoomIn');
};
}]);
UPDATE 1
As mentioned in the comments, do not attempt to inject $scope to your factory. Here is a Plunker I created which lets you open a modal by calling the factory.
http://plnkr.co/edit/G68NVYZlTqrIS0N2TKL4
这篇关于向控制器添加服务时出现未知提供者的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
