Angular directive name: only lower case letters allowed?

AngularjsAngularjs Directive

Angularjs Problem Overview


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?

Angularjs Solutions


Solution 1 - Angularjs

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

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

Solution 3 - Angularjs

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

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionZachView Question on Stackoverflow
Solution 1 - AngularjsSteve KlöstersView Answer on Stackoverflow
Solution 2 - AngularjsAlwaysALearnerView Answer on Stackoverflow
Solution 3 - AngularjsRobView Answer on Stackoverflow