AngularJS directive not being called

Question

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...

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

Answer 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:

1. Strip x- and data- from the front of the element/attributes.
2. 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.