AngularJS directive not being called

javascript angularjs svg d3.js

26,193

Solution 1

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) {

Solution 2

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:

Strip x- and data- from the front of the element/attributes.
Convert the colon-, hyphen-, or underscore-delimited name to camelCase.

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.

26,193

sir_thursday

Updated on July 09, 2022

Comments

sir_thursday almost 2 years
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...
- JoshSGman almost 10 years
  
  Is this giving you an error, because I would expect an error if you're only injecting 'd3Service' in the array of dependency injection as opposed to inject both ['$window', 'd3Service', function($window, d3Service) {//code etc}]
- sir_thursday almost 10 years
  
  ^^ Perfect. Your answer plus Engima's worked great.
sir_thursday almost 10 years

Ohh... now I get "Cannot read property 'd3' of undefined at link". An error... woo hoo!
EnigmaRM almost 10 years

You will probably also need to make the change that @JoshSGman suggested as well.
sir_thursday almost 10 years

If you edit your answer to attribute @JoshSGman's comment, I'll select this as the correct answer.
whitestryder over 9 years

This helped me immediately, I was fighting with this problem for an hour before realizing there was something fundamentally wrong with the way I implemented my directive, compared to a Plunkr example I was referencing. Thanks.
Jovan Perovic about 8 years

I was really wondering why it didn't work. So, I stripped down my directive to a bare minimum but still had no luck. Then I found your answer! :) Thanks a lot! :)
chribsen over 7 years

My problem was that I was using underscore _ in the directive name, which didn't work
Rowinson Gallego almost 7 years

While I was struggling with harder dependency problems I was missing the obvious: a hyphen character in my directive name :(