HTML element attribute names with hyphens are auto-converted to camelcase

Question

I'm building a custom AngularJS directive to create a google map, and I've stored some of the google map options in custom attributes within my tag:

<googlemap zoom-control="true" …></googlemap>

Angular's directive compile method has parameters (tElement, tAttrs, transclude); when I log tAttrs to the console, the object has properties with names that have converted hyphens to camelCase:

Who is doing this—Angular or the browser (checked in Firefox & Chrome)? Can I rely on this behaviour?

P.S. When I check the DOM, the attributes of the html element still have hyphens.

Braud

Answer 1

Angular is doing it. Yes you can rely on it:

From the Attributes page:

A shared object between directive compile / linking functions which contains normalized DOM element attributes. The the values reflect current binding state {{ }}. The normalization is needed since all of these are treated as equivalent in Angular:
<span ng:bind="a" ng-bind="a" data-ng-bind="a" x-ng-bind="a">

Sequin

Thanks! I tried searching the docs for "hyphen" and "dash" but never got that page. I knew ng:bind vs ng-bind vs data-ng-bind but I didn't realise Angular would convert the attribute names into json-friendly names. btw, i'm using that service and it's working just fine (but I would like to see if I can do it the "Angular way"). – Braud

@jacob I looked at your service again yesterday... you might be better off just leaving it the way it is. I'm not sure how you could add a directive to the HTML that could then encapsulate the addListner stuff that does the DOM manipulation, since all the HTML is added by the Google APIs. (For other readers, we're discussing this service). – Sequin

okay thanks. I'll add it to the end of the backlog to take a look at it after everything else is done. Thanks! – Braud