angularjs - 为什么 Angular Google Maps 中的 元素需要 ng-non-bindable？

Question

我有一个关于 的问题 的元素Angular Google Maps 插入。 Windows 元素文档中的示例源代码使用 ng-non-bindable <div> 的属性<ui-gmap-windows> 内部元素。显然，为了让 Angular 绑定(bind)在页面上正确呈现，这是必要的。这在文档中没有明确说明，所以我想知道为什么这个属性是必要的，特别是因为 official Angular documentation on ng-non-bindable清楚地表明，带注释的 HTML 元素中的 Angular 文字不会被 Angular 解析。

为了说明，这是我的 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)，模型的值不会绑定(bind)到这些 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 手动编译模板。

如果你有类似的东西，在标准 Angular :

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

这通常意味着“指令”正在包含内容，因此“someBinding”绑定(bind)到“指令”实例化的范围，而不是“指令”内部作用域。

但是，在 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 使用嵌入元素作为模板来应用到每个实例化的窗口对象，但是如果 angular 进入那​​里并将该元素绑定(bind)到错误的范围，那么 ui-gmap 就无法重新绑定(bind)到正确的范围。

希望能为您澄清一点。

另外，除非您需要同时显示多个窗口，否则您真的不应该使用 ui-gmap-windows。使用单个 ui-gmap-window 并绑定(bind)到事件标记。