Angular.js/jQuery html string parsing in 1.9.1 vs. 1.8.3

Question

Trying to do angular.element(stringWithHtmlStructure); causes

Error: Syntax error, unrecognized expression: <div id="foo">bar</div>

in jquery 1.9.1, however it works in jquery 1.8.3

Is it an issue or a feature? Security one perhaps? How do I deal with it?

1.8.3 example http://plnkr.co/edit/ZYYKIixcYzOL46hq0puS?p=preview 1.9.1 example http://plnkr.co/edit/ETmQMY8KoCP0gaKdSrMD?p=preview

It's definitely not a problem with any of the angular stuff, doing $(stringWithHtmlStructure) fails just the same, as you can see here http://plnkr.co/edit/FqvOKZ62t0IJ57cT05ew?p=preview

Answer 1

The problem is definitely with jquery 1.9.1

HTML strings with leading whitespace: jQuery 1.9 restricts the strings processed by $() for security reasons. Although we recommend you use $.parseHTML() to process arbitrary HTML like templates, the 1.1.0 version of the Migrate plugin restores the old behavior.

way to deal with it is use any kind of trimming function, whether it's jquery's $.trim or underscores trim or even your own.

Note that this problem only occurs when trying to use template from $templateCache, if you use template or templateUrl attr on the directive it works fine, I guess angular internally trims it.

Answer 2

If your string contains leading spaces you should remove them.

This should work:

angular.element($.trim(stringWithHtmlStructure));