Angular directive name: only lower case letters allowed?

Question

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?

Solution 1

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.

Solution 2

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

Comments

[spikeheap]

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.

[Rui Nunes]

It's also inline with web components namespacing: webcomponents.github.io/articles/web-components-best-practic‌​es

[JamesUsedHarden]

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.

[sazary]

the worst surprise comes when you realize you should start directive name with small, not capitalized letters.

[ColacX]

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.

[MEMark]

@sazary Why is this a surprise? Its casing aligns with all other javascript identifiers in Angular.