4

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:

screenshot from Chrome Dev Tools of the expanded $tAttrs object (property names have been converted to valid format)

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.

Jakob Jingleheimer
  • 30,952
  • 27
  • 76
  • 126

1 Answers1

7

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

Seth Flowers
  • 8,990
  • 2
  • 29
  • 42
Mark Rajcok
  • 362,217
  • 114
  • 495
  • 492
  • 1
    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"). – Jakob Jingleheimer Jan 12 '13 at 06:32
  • 1
    @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](http://stackoverflow.com/questions/14226975/angularjs-ng-include-inside-of-google-maps-infowindow/14228601#14228601)). – Mark Rajcok Jan 12 '13 at 16:27
  • okay thanks. I'll add it to the end of the backlog to take a look at it after everything else is done. Thanks! – Jakob Jingleheimer Jan 13 '13 at 20:12