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