为什么Angular Google Maps中<ui-gmap-windows>元素需要ng-non-bindable？

Question

我对此有疑问 Angular Google Maps插件的元素.Windows元素文档中的示例源代码使用元素内部的ng-non-bindable属性.显然,这是必要的,以便Angular绑定在页面上正确呈现.这在文档中没有明确说明,所以我想知道为什么这个属性是必要的,特别是因为关于ng-non-bindable的官方Angular文档清楚地表明Angular不会解析带注释的HTML元素中的Angular文字.<div><ui-gmap-windows>

为了说明,这是我的HTML部分中的代码片段(假设此windows元素的范围中的属性模型具有名称和描述字段):

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

如果没有ng-non-bindable作为<div>(或没有div)的属性,模型的值将不会绑定到这些Angular文字.只有冒号将在窗口中呈现,如":".但是,一旦我输入属性:

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

然后窗口的文本将正确呈现.它会说"位置1:这是位置1的位置".

所以再一次,我想知道为什么这里确实需要ng-non-bindable.它将极大地帮助我更好地理解这个Angular库,也许Angular作为一个整体,更好.

Answer 1

基本上这归结为ui-gmap手动编译模板.

在标准角度,如果你有类似的东西:

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

这通常意味着"指令"是转义内容,因此"someBinding"绑定到"指令"实例化的范围,而不是"指令"innerScope.

但是,在ui-gmap的情况下:

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

范围应该是创建的每个窗口,而不是ui-gmap-windows实例化的范围.因此,如果您没有ng-non-bindable,那么范围将是ui-gmap-windows实例化,而someBinding将不存在.

本质上,ui-gmap使用transcluded元素作为模板来应用于每个实例化的窗口对象,但是如果angular进入并将该元素绑定到错误的范围,则ui-gmap无法重新绑定到正确的范围.

希望能为您澄清一下.

另外,除非你需要同时显示多个窗口,否则你真的不应该使用ui-gmap-windows.使用单个ui-gmap窗口并绑定到活动标记.