AngularJS: inject service into directive?
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.
bjudson
Updated on January 22, 2020Comments
-
bjudson over 4 years
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 asundefined
in my directivelink
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.