AngularJS:将服务注入指令?

时间:2014-01-19 00:29:13

标签: javascript angularjs dependency-injection d3.js

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

本教程创建一个包含d3Service的d3模块,并将其注入指令中。我的应用程序结构略有不同,但每当我尝试注入d3服务时,它在我的指令undefined函数中显示为link。我可以毫无问题地将d3服务注入我的控制器。这就是我正在做的事情:

app.js

var sentimentApp = angular.module('sentimentApp', [
  'ngRoute',
  'ngSanitize',
  'sentimentAppServices',
  'sentimentAppDirectives',
  'sentimentAppControllers'
]);

services.js内,我有几项服务,其中一项是d3:

var sentimentAppServices = angular.module('sentimentAppServices', ['ngResource'])
// other services
.factory('d3', [function(){
  var d3;
  d3 = // d3 library code 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
     }
   }

任何提示?感谢。

1 个答案:

答案 0 :(得分:12)

问题是您的暗示依赖项与您实际传入的内容不匹配:

['$compile, d3', function($compile, d3

所以,你所做的是将d3服务作为变量$compile传递,而不是将任何内容作为变量d3传递。

它可能会帮助您理解这是为了什么。在非缩小代码中,您可以完全取出该数组包装器,如下所示:

app.directive('directiveName', function($compile, d3) {
  // ....
});

将名称作为字符串传递的要点是因为字符串不会受到缩小的影响。这意味着angular将知道如何在这种情况下注入正确的依赖项:

 ['$compile, d3', function(a, b

a将设置为$compile服务,b将设置为d3服务。