Leading whitespace/text in templates

[bensgroi]

I'm having a bizarre problem when using the ui-gmap-search-box directive: Any leading whitespace (or other text) in the template causes directive to fail when adding the control to the map, with the error "Uncaught TypeError: Cannot read property 'zIndex' of undefined" from Google Maps.

So with the following:

<ui-gmap-google-map center="ui.mapOptions.center" zoom="ui.mapOptions.zoom">
  <ui-gmap-map-control template="control.tpl.html"></ui-gmap-map-control>
</ui-gmap-google-map>

This works:

<script type="text/ng-template" id="control.tpl.html"><button>click</button>
</script>

But this doesn't:

<script type="text/ng-template" id="control.tpl.html">
  <button>click</button>
</script>

I've tracked it down to the Control.prototype.link function: it uses controlDiv.contents() to get the contents of the template, then pushes the first element of that into maps.controls. But the first element is a whitespace text element, so there's an error when Google Maps tries to add a text element rather than a true DOM node. I've found that using controlDiv.children() instead of .contents() solves the problem.

I haven't been able to duplicate the problem yet though frustratingly enough. Will keep trying.

[bensgroi]

Figured it out: I couldn't reproduce the problem because it only manifests when you include the full version of jQuery, rather than relying on jqLite. It appears to have something to do with the .append() method; jQuery's append() seems to include leading whitespace as text nodes, while jqLite appends only the DOM nodes. This looks like a bug in jqLite, which I think should be emulating the standard jQuery functionality. Either way, the problem could be avoided by using controlDiv.children() rather than controlDiv.controls() in Control.prototype.link.

http://plnkr.co/edit/iAonJENMuPMW8aT5PWob?p=preview

[nmccready]

Or the fix into master and I'll roll it into 2.0.2

[nmccready]

Pr it not or

[nmccready]

#780