I'm trying to implement a d3 directive in Angular, and it's hard because visually nothing is happening, and no errors are being thrown on the console.
Here's my d3 directive:
myApp.directive('d3-bars', ['d3Service', function($window, d3Service) {
return {
restrict: 'EA',
scope: {},
link: function(scope, element, attrs) {
// More code below ....
Here is my HTML:
<d3-bars bar-height="20" bar-padding="5"></d3-bars>
At first I thought it wasn't appending an svg
, because inspecting the element that's what it looks like, but now I don't think the directive is even running at all. I stuck a console.log
inside of it at the very beginning and it didn't appear either. Am I missing something simple?
EDIT:
I tried changing the top line to
angular.module('myApp.directives', ['d3'])
.directive('d3-bars', ['d3Service', function($window, d3Service) {
But that didn't work either. I don't even know what's the difference between the two headers anyway...
Your directive name may be wrong. Angular directives are commonly camel-cased. And when in the HTML they are hypenated. so ngClass
turns into ng-class
in the HTML.
At least when I've tried to use -
or other characters in my directives it hasn't worked.
Check out this Google Group post for some validity: using dash in directive
Also here are the docs: Directives - matching directives
You'll also want to make the change that was suggested in the comments by JoshSGman:
.directive('d3Bars',['$window', 'd3Service', function($window, d3Service) {
the naming of your directive is the problem. Angular normalizes the names of directives in the html before it matches them to the names in JavaScript. The normalization process works in two steps:
So, the correct name for your directive in JavaScript would be d3Bars
. Change it to that and it should work.
See https://docs.angularjs.org/guide/directive#matching-directives for more information.
I've had similar behavior when I forgot to define the link
property.
No errors in the console, nothin.
One more thing happened to me that made the directive not to work at all
when you have one module
have a directive and you created a new module
with a new directive but due to the copy-paste you forget change Module name
, this way AngulerJs
somehow will
remove the first directive
so
make sure that every module have unique name
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.