Question

我对 Angular Google Maps 插件的元素有疑问。 Windows元素文档中的示例源代码使用ng-non-bindable元素内<div>元素的<ui-gmap-windows>属性。显然，这是必要的，以便Angular绑定在页面上正确呈现。这在文档中没有明确说明，所以我想知道为什么这个属性是必要的，特别是因为official Angular documentation on ng-non-bindable清楚地表明Angular不会解析带注释的HTML元素中的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）的属性，则模型的值不会绑定到这些Angular文字。只有冒号将在窗口中呈现，如＆＃34;：＆＃34;。但是，一旦我输入属性：

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

然后窗口的文本将正确呈现。它会说像＆＃34;位置1：这是位置1的位置。＆＃34;

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

Answer 1

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

标准角度，如果你有类似的东西：

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

这通常意味着＆＃34;指令＆＃34;是转录内容，因此＆＃34; someBinding＆＃34;必然会受到＆＃34;指令＆＃34;的范围的约束。实例化，而不是＆＃34;指令＆＃34; 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窗口并绑定到活动标记。

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

1 个答案: