Angular directive name: only lower case letters allowed?

by

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.

More Related Contents:

  1. Is this a “Deferred Antipattern”?
  2. When to favor ng-if vs. ng-show/ng-hide?
  3. AngularJS 1.5+ Components do not support Watchers, what is the work around?
  4. How to use the ‘replace’ feature for custom AngularJS directives?
  5. Link vs compile vs controller
  6. Angular.js directive dynamic templateURL
  7. What is the best way to conditionally apply attributes in AngularJS?
  8. When writing a directive in AngularJS, how do I decide if I need no new scope, a new child scope, or a new isolated scope?
  9. Unit Testing AngularJS directive with templateUrl
  10. How to select an element by classname using jqLite?
  11. Angularjs loading screen on ajax request
  12. Confused about Angularjs transcluded and isolate scopes & bindings
  13. Angular: calling controller function inside a directive link function using &
  14. Angular directive how to add an attribute to the element?
  15. AngularJS: ng-repeat list is not updated when a model element is spliced from the model array
  16. get original element from ng-click
  17. angular directive encapsulating a delay for ng-change
  18. angularjs share data config between controllers
  19. Call a method of a controller from another controller using ‘scope’ in AngularJS
  20. AngularJS leaves comments in HTML: is it possible to remove them?
  21. When to use the AngularJS `$onInit` Life-Cycle Hook
  22. AngularJS – how to override directive ngClick
  23. AngularJS: ngInclude vs directive
  24. Pass form to directive
  25. How to use `replace` of directive definition?
  26. How to implement an ng-change for a custom directive
  27. How to create a directive with a dynamic template in AngularJS?
  28. Access Parent Scope in Transcluded Directive
  29. how do I get ng-include directive to work with a Content Delivery Network?
  30. AngularJS – Directives vs Controllers

Leave a Comment