javascript AngularJS：将服务注入指令？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/21211695/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
AngularJS: inject service into directive?
提问by bjudson
I've been trying to integrate D3.js with Angular, and am following this tutorial: http://www.ng-newsletter.com/posts/d3-on-angular.html
我一直在尝试将 D3.js 与 Angular 集成，并且正在关注本教程：http: //www.ng-newsletter.com/posts/d3-on-angular.html
The tutorial creates a d3 module which contains d3Service, and that gets injected into a directive. My app has a slightly different structure, but whenever I try to inject the d3 service, it shows up as undefinedin my directive linkfunction. I can inject the d3 service into my controller without issue. Here's what I'm doing:
本教程创建了一个 d3 模块，其中包含d3Service, 并将其注入指令中。我的应用程序的结构略有不同，但是每当我尝试注入 d3 服务时，它都会显示undefined在我的指令link函数中。我可以毫无问题地将 d3 服务注入我的控制器。这是我在做什么：
app.js:
app.js：
var sentimentApp = angular.module('sentimentApp', [
'ngRoute',
'ngSanitize',
'sentimentAppServices',
'sentimentAppDirectives',
'sentimentAppControllers'
]);
Within services.js, I have several services, one of which is d3:
在 中services.js，我有几个服务，其中之一是 d3：
var sentimentAppServices = angular.module('sentimentAppServices', ['ngResource'])
// other services
.factory('d3', [function(){
var d3;
d3 = // d3 library code here
return d3;
}]);
Now in directives.js:
现在在directives.js：
var sentimentAppDirectives = angular.module('sentimentAppDirectives', ['sentimentAppServices']);
sentimentAppDirectives.directive('lsPieChart', ['d3', function($compile, d3){
return {
// scope & template
link: function($scope, elem, attr, ctrl) {
console.log(d3); // undefined
}
}
Any tips? Thanks.
有小费吗？谢谢。
回答by m59
The problem is that your hinted dependencies don't match up to what you're actually passing in:
问题是您暗示的依赖项与您实际传入的不匹配：
['$compile, d3', function($compile, d3
So, what you were doing is passing the d3service as the variable $compileand not passing anything as the variable d3.
因此，您所做的是将d3服务作为变量传递，$compile而不是将任何内容作为变量传递d3。
It might help you to understand what this is for. In non-minified code, you could take out that array wrapper altogether, like this:
它可能会帮助您了解这是做什么用的。在非缩小代码中，您可以完全删除该数组包装器，如下所示：
app.directive('directiveName', function($compile, d3) {
// ....
});
The point of passing the names as a string is because strings won't be affected by minification. This means that angular will know how to inject the right dependencies in a case like this:
将名称作为字符串传递的重点是因为字符串不会受到缩小的影响。这意味着 angular 将知道如何在这样的情况下注入正确的依赖项：
['$compile, d3', function(a, b
awill be set to the $compileservice and bto your d3service.
a将设置为$compile服务和b您的d3服务。
