尝试依赖向AngularJs中的控制器注入服务时出现未知的提供程序错误
[英]Unknown provider error when trying to dependency inject a service to a controller in AngularJs
问题描述
I'm new at Angular and trying to do a basic dependency injection to get the hang of it. 
我是Angular的新手，正在尝试进行基本的依赖项注入来掌握它。 In this example I'm trying to dependency inject a service to a controller, and I'm getting the following error. 在此示例中，我试图将服务注入到控制器，并且遇到以下错误。
Error: [$injector:unpr] Unknown provider: $scopeProvider <- $scope <- testInjection
Html: HTML：
<!DOCTYPE html>
<html ng-app="plunker">
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<script>document.write('<base href="' + document.location + '" />');</script>
<link rel="stylesheet" href="style.css" />
<script data-require="angular.js@1.4.x" src="https://code.angularjs.org/1.4.0-rc.1/angular.js" data-semver="1.4.0-rc.1"></script>
<script src="app.js"></script>
</head>
<body ng-controller="MainCtrl">
<p>Hello {{name}}!</p>
</body>
</html>
js: js：
var app = angular.module('plunker', []);
app.controller('MainCtrl', ['testInjection',function($scope) {
$scope.name = 'World';
}]).factory('testInjection', ['$scope', function($scope) {
}]);
3 个解决方案
解决方案1
0 2015-05-06 08:21:12
You should do this : 你应该做这个 ：
app.factory('testInjection', ['$scope', function($scope) {
}]);
app.controller('MainCtrl', ['$scope', 'testInjection',function($scope, testInjection) {
$scope.name = 'World';
}]);
It's better to define your service (factory) before. 最好事先定义您的服务（工厂）。 And the problem here is that even if the scope is injected in the service, you have to inject it again in the controller. 这里的问题是，即使将范围注入服务中，也必须再次将其注入控制器中。
解决方案2
0 2015-05-06 10:53:07
As Nikos said, don't try to inject the scope object into a service or factory. 正如Nikos所说，请勿尝试将范围对象注入服务或工厂。
For my angular projects, I create a new file for each controller/service/factory/directive. 对于我的有角项目，我为每个控制器/服务/工厂/指令创建一个新文件。 The setup of these files look like this: 这些文件的设置如下所示：
A factory: 一个工厂：
(function () {
'use strict';
angular.module('MyModule')
.factory('someService', function () {
var service = {
myFunction: function () {
return "Hello";
}
};
return service;
});
})();
A controller: 控制器：
(function () {
'use strict';
angular.module('MyModule')
.controller('someCtrl', ['$scope', 'someService', function ($scope, someService) {
$scope.name = "World";
$scope.message = someService.myFunction() + " " + $scope.name;
}]);
})();
Beware, the above syntax only retrieves a existing module. 当心，以上语法仅检索现有模块。 See Angular Modules under "Creation versus Retrieval". 请参见“创建与检索”下的角度模块 。 I have another file which creates the module using the same syntax but with brackets for importing other modules. 我有另一个文件，该文件使用相同的语法创建模块，但带有用于导入其他模块的括号。
You should take a look at the angular docs for more information and examples. 您应该看一下有角度的文档，以获取更多信息和示例。
解决方案3
0 2015-05-07 06:58:06
I have modified your plunker here . 我在这里修改了你的pl子。 Please check the way you define a service and the way you inject it. 请检查定义服务的方式和注入方式。 It does not matter even if you define it after the controller. 即使在控制器之后定义它也没关系。 Also, the error was because your factory function did not return anything. 同样，该错误是因为工厂函数未返回任何内容。 Fixed that as well. 也修复了该问题。
Your code should look like: 您的代码应如下所示：
var app = angular.module('plunker', []);
app.controller('MainCtrl'['$scope','testInjection',function($scope,testInjectio)
{
$scope.name = testInjection;
}]).factory('testInjection', function() {
return "ABC"
});
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.