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

Question

I have a question about an item Maps Angular plugin. The sample source code in the documentation for the Windows element uses the ng-non-bindable for the <div> inside the <ui-gmap-windows> element. This seems to be necessary for Angular bindings to display correctly on the page. This is not explicitly stated in the documentation, so I wonder why this attribute is necessary, especially since the official official Angular documentation on ng-non-bindable makes it clear that Angular literals in annotated HTML elements will not be parsed using Angular.

To illustrate this, this is a piece of code in my partial HTML (suppose the attribute model in the scope for this window element has a name and 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 the <div> attribute (or without div), model values ​​will not be bound to these Angular literals. Only a colon will be displayed in the window, as in ":". But, as soon as I add 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 text will be displayed correctly. He will say something like "Location 1: Here is location 1".

So again, I wonder why exactly ng-non-bindable is required here. This will help me better understand this Angular library and, possibly, Angular as a whole, better.

Answer 1

It basically comes down to ui-gmap doing manual template compilation.

In standard angular, if you have something like:

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

This usually means that the “directive” translates the content, and therefore “someBinding” is tied to the scope in which the “directive” is created, and not the “innerScope” directive.

However, in the case of ui-gmap:

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

The scope should be for each window created, and not for the scope of the ui-gmap-windows instance. Therefore, if you do not have ng-non-bindable, then the area will be specified in the creation of ui-gmap-windows, and someBinding will not exist.

Essentially, ui-gmap uses transcluded as a template to apply to each instance of a window object, but if angular gets there and associates this element with the wrong area, then ui-gmap cannot be re-attached to the correct volume.

Hope this clarifies you a bit.

In a separate note, you really should not use ui-gmap-windows unless you need to show multiple windows at the same time. Use one ui-gmap window and bind to the active marker.