Case sensitivity in AngularJS partials

Question

I have a partial that contains XML and I'm including it in another partial.

<rootNode>
    <firstName>{{ user.name }} </firstName>
    <age>{{ user.age }}</age>
</rootNode>

If I use this as a partial with <div ng-include="partials/test.xml"></div>, the variables come through fine, but all the tags are now lower case.

<rootnode>
    <firstname>Austin</firstname>
    <age>27</age>
</rootnode>

That XML isn't going to validate against a schema that expects the correct case.

Is there a way to tell the ng-include directive to keep the case the same, or am I required to use another library like Mustache to do this kind of template?

I actually just gave up on trying to use Angular's template to build valid XML. It's probably possible if I made changes to the internal templating engine, but that was a lot of work to accomplish what was easily done by just including another library (in my case, Handlebars). — austin, Jan 21 '15 at 16:10

score 1 · Answer 1 · edited Jun 20 '20 at 09:12

The internal conversion could be customized to enforce preservation of case by modifying jqLite(or jQuery if available), which normalizes elements to be lowercase via the toLowerCase method.

Otherwise, the native XMLSerializer seems to be browser specific:

DOM handling is very confusing if you have tags containing uppercase letters together with lowercase letters. This is due to the XHTML standard: XHTML is case sensitive, and since XHTML only accepts lower case HTML tags and attribute names, a general search and replace function was executed to replace all upper case tags with lowercase tags. But IE has ignored this aspect of XHTML standard by simply running all XML operations protecting the case-sensitivity. This is much more convenient since XML standard itself is case-sensitive.

Below are the conflicting behaviors of XML handling in Firefox:

All xhtml tags are converted into LOWERCASE because of XHTML compatibility

nodeName getter for Element object returns in UPPERCASE

XMLDocument object keeps the dom document by converting all tags to UPPERCASE

XMLSerializer.serializeToString returns all the tag names in UPPERCASE

Hence, writing robust code that perform both server-side and client-side XML operations is always difficult with this conflicting case-insensitive DOM handling. Coming versions must handle this issue by supporting case-sensitivity.

References

Case sensitivity in AngularJS partials

1 Answers1