Why is ng-non-bindable required for <ui-gmap-windows> element in Angular Google Maps?

Question

I have a question about the element of the Angular Google Maps plugin. The example source code in documentation for the Windows element uses the ng-non-bindable attribute for the <div> inside of the <ui-gmap-windows> element. Apparently, this is necessary in order for Angular bindings to render correctly on the page. This is not explicitly stated in the documentation, so I am wondering exactly why this attribute is necessary, especially since the official Angular documentation on ng-non-bindable makes it clear that Angular literals within annotated HTML elements will not be parsed by Angular.

To illustrate, this is a snippet of code in my HTML partial (assume that the attribute model in scope for this windows element has a name and a description field):

<ui-gmap-markers models="markers" coords="'self'">
  <ui-gmap-windows>
    <div>{{name}}: {{description}}</div>
  </ui-gmap-windows>
</ui-gmap-markers>

Without ng-non-bindable as an attribute to the <div> (or with no div), the model's values will not be bound to these Angular literals. Just the colon would be rendered in the window, as in ":". But, once I put in the attribute:

<ui-gmap-markers models="markers" coords="'self'">
  <ui-gmap-windows>
    <div ng-non-bindable>{{name}}: {{description}}</div>
  </ui-gmap-windows>
</ui-gmap-markers>

then the window's text will render correctly. It will say something like "Location 1: This is where Location 1 is."

So once again, I am wondering why ng-non-bindable is exactly required here. It will greatly help me better understand this Angular library, and perhaps Angular as a whole, better.

Fugate

Answer 1

Basically this boils down to ui-gmap doing manual compilation of the template.

In standard angular if you have something like:

<directive>
   <some-html>{{someBinding}}</some-html>
<directive>

That usually means that "directive" is transcluding the content, and therefore "someBinding" is bound to the scope in which "directive" instantiated, not the "directive" innerScope.

However, in the case of ui-gmap:

<ui-gmap-windows>
   <some-html>{{someBinding}}</some-html>
</ui-gmap-windows>

The scope should be to each window that is created, not the scope of ui-gmap-windows instantiation. So if you don't have ng-non-bindable then the scope will be to the ui-gmap-windows instantiation and someBinding will not exist.

Essentially ui-gmap is using the transcluded element as a template for applying to each instantiated window object, but if angular gets in there and binds that element to the wrong scope, then ui-gmap can't rebind to the correct scope.

Hope that clarifies for you a bit.

On a separate note, you really shouldn't use ui-gmap-windows unless you need a number of windows displayed simultaneously. Use a single ui-gmap-window and tie to the active marker.

Mumford

How do you tie a window to an active marker if you are using <ui-gmap-markers>? – Haberdasher

@Derek朕會功夫 attach handlers to the markers and change the object that the window is bound to based on marker changes. – Mumford