76

My code:

app.directive('abcabc', function (){ alert('directive');}); // working

but

app.directive('abcAbc', function (){ alert('directive');}); // not working !
app.directive('abc-abc', function (){ alert('directive');}); // not working !

Am I doing wrong? Or there are special naming rules for Angular directive?

Zach
  • 5,715
  • 12
  • 47
  • 62

3 Answers3

119

AngularJS attempts to make everyone happy!

Some people prefer to use data attributes, like data-abc-abc, I assume to keep validators happy. Other people prefer to use namespaces like abc:abc, and others prefer to use the actual directive name abcAbc. Or even all caps ABC_ABC. Or extension attributes like x-abc-abc.

AngularJS normalises the name used in HTML to attempt to cover all of these cases. data- and x- are stripped, the remainder camelcased with :, - and _ as word boundaries. This makes abcAbc from the cases mentioned above, which is used to look up the directive declared in JavaScript.

This is all called attribute normalisation (US: attribute normalization) and can be found in the AngularJS documentation and source code.

Steve Klösters
  • 9,427
  • 2
  • 42
  • 53
  • 6
    Thank you for this! I read the documentation as "you can do it either way" but that's clearly not the case. I'm surprised this only has 10 upvotes so far. – spikeheap Jan 18 '14 at 18:46
  • It's also inline with web components namespacing: http://webcomponents.github.io/articles/web-components-best-practices/ – Rui Nunes Apr 22 '14 at 17:35
  • 2
    I changed the last paragraph to use U.S. English form of the word "normalization" instead of British "normalisation" since the Angular docs use the English spelling and searching them for the British spelling doesn't return any results. – Samuel Neff Sep 04 '14 at 02:31
  • 1
    the worst surprise comes when you realize you should start directive name with small, not capitalized letters. – sazary Dec 25 '14 at 23:00
  • 1
    @sazary Why is this a surprise? Its casing aligns with all other javascript identifiers in Angular. – MEMark Sep 03 '15 at 09:16
24

You should use dash-separated names inside the html and camelCase for the corresponding name in the directive.

As you can read on the doc: Angular uses name-with-dashes for attribute names and camelCase for the corresponding directive name)

Here: http://docs.angularjs.org/tutorial/step_00

AlwaysALearner
  • 43,759
  • 9
  • 96
  • 78
  • 6
    it may be the recommended way. but i hate this as searching for corresponding directive in all files are made more tedious. especially for directives with many words. – ColacX May 12 '15 at 14:45
0

Well, the directive name has to be all lower case, at least in AngularJS version 1.4.9, otherwise I get an $inject can't be found error

Rob
  • 37
  • 5