AngularJS：注入服务到指令？ [英] AngularJS: inject service into directive?

问题描述

我一直在尝试将D3.js与Angular集成，并遵循本教程：
http://www.ng-newsletter.com/posts/d3-on-angular.html

本教程创建了一个d3模块其中包含 d3Service ，并被注入到一个指令。我的应用程序有一个稍微不同的结构，但每当我尝试注入d3服务，它显示为 undefined 在我的指令链接函数。我可以注入d3服务到我的控制器没有问题。这是我在做什么：

app.js ：

$ b b

  var sentimentApp = angular.module（'sentimentApp'，[
'ngRoute'，
'ngSanitize'，
'sentimentAppServices'，
'sentimentAppDirectives'，
'sentimentAppControllers'
]）; 
  

在 services.js 服务，其中之一是d3：

  var sentimentAppServices = angular.module（'sentimentAppServices'，['ngResource']）
 //其他服务
 .factory（'d3'，[function（）{
 var d3; 
 d3 = // d3库代码here 
 return d3; 
}]）; 
  

现在在 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 
} 
} 
  pre> 
 
 
任何提示？谢谢。
解决方案
你提示的依赖关系不符合你实际传递的内容：
  ['$ compile，d3'，function （$ compile，d3 
  
所以，你所做的是传递 d3  d3   服务作为变量 $ compile  p> 
 
 
这可能会帮助你理解这是什么。在非缩略代码中，你可以取出数组包装器，如下：
  app.directive（'directiveName'，function（$ compile，d3）{
 // ... 
}）; 
  
将名称作为字符串传递的意义是因为字符串不会受到缩小的影响。这意味着angular将知道如何注入正确的依赖关系在这种情况下：
  ['$ compile，d3'函数（a，b 
  
 设置为您的 d3 服务的 $ compile 服务和 b 服务。
 
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

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 undefined in my directive link function. I can inject the d3 service into my controller without issue. Here's what I'm doing:

app.js:
var sentimentApp = angular.module('sentimentApp', [
  'ngRoute',
  'ngSanitize',
  'sentimentAppServices',
  'sentimentAppDirectives',
  'sentimentAppControllers'
]);
Within services.js, I have several services, one of which is 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:
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.
解决方案
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 d3 service as the variable $compile and not passing anything as the variable 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:
 ['$compile, d3', function(a, b
a will be set to the $compile service and b to your d3 service.

                        
这篇关于AngularJS：注入服务到指令？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！