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

杂技

我有一个关于 Angular Google Maps插件的元素Windows元素的文档中的示例源代码将ng-non-bindable属性用于<div><ui-gmap-windows>元素内部显然,这是使Angular绑定正确显示在页面上所必需的。这在文档中没有明确说明,所以我确切地想知道为什么需要此属性,尤其是因为有关ng-non-bindable正式Angular文档明确指出带注释的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),则模型的值将不会绑定到这些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。

迈尔斯

基本上,这可以归结为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使用了已包含元素的模板作为应用于每个实例化窗口对象的模板,但是如果angular进入那里并将该元素绑定到错误的作用域,则ui-gmap无法重新绑定到正确的作用域。

希望能为您澄清一下。

另外,除非需要同时显示多个窗口,否则您实际上不应该使用ui-gmap-windows。使用单个ui-gmap-window并绑定到活动标记。

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

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

来自分类Dev

Angular Google Maps ui-gmap-markers标签

来自分类Dev

如何将ui-gmap-windows InfoWindow / Marker中的值传递给ui-sref?

来自分类Dev

无法为Json Web服务加载Ajax Google Maps Gmap

来自分类Dev

无法为Json Web服务加载Ajax Google Maps Gmap

来自分类Dev

温泉UI和Angular JS Google Maps

来自分类Dev

angular-google-maps与angular-ui / ui-map

来自分类Dev

Google Maps Places:为什么需要API密钥?

来自分类Dev

Google Maps Places:为什么需要API密钥?

来自分类Dev

Windows中的Google Maps Draw Route故障

来自分类Dev

为什么对angular-google-maps提供程序的测试失败?

来自分类Dev

为什么未在Google Maps(JavaScript)中显示此SVG?

来自分类Dev

Gmap3 Google Maps使用地理编码的位置将地图居中

来自分类Dev

Gmap3 Google Maps使用地理编码的位置将地图居中

来自分类Dev

为什么MissingKeyMapError使用带有质数的标签p:gmap(在最简单的示例中)?

来自分类Dev

Gmap,jQuery和Google地图

来自分类Dev

为什么即使我在JSFiddle中声明ng-app =“ MyApp”,也为什么需要angular.bootstrap

来自分类Dev

Map Controller中的ui-gmap-marker的标记单击事件未触发

来自分类Dev

为什么Google Maps API中未定义我的Maps对象

来自分类Dev

Kendo UI和Google Maps

来自分类Dev

在Angular-Google-Maps中添加标记

来自分类Dev

Typescript或Angular 2中的Google Maps

来自分类Dev

ui-gmap-markers不起作用

来自分类Dev

建模成ui-gmap-marker

来自分类Dev

Windows为什么需要withSocketsDo?

来自分类Dev

为什么不需要Google Maps API密钥来做到这一点?

来自分类Dev

将GMap.NET用于Google Maps的问题。无法连接到互联网并且出现错误CS0246

来自分类Dev

为什么需要UI线程检查

来自分类Dev

pharo中的Windows UI

Related 相关文章

  1. 1

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

  2. 2

    Angular Google Maps ui-gmap-markers标签

  3. 3

    如何将ui-gmap-windows InfoWindow / Marker中的值传递给ui-sref?

  4. 4

    无法为Json Web服务加载Ajax Google Maps Gmap

  5. 5

    无法为Json Web服务加载Ajax Google Maps Gmap

  6. 6

    温泉UI和Angular JS Google Maps

  7. 7

    angular-google-maps与angular-ui / ui-map

  8. 8

    Google Maps Places:为什么需要API密钥?

  9. 9

    Google Maps Places:为什么需要API密钥?

  10. 10

    Windows中的Google Maps Draw Route故障

  11. 11

    为什么对angular-google-maps提供程序的测试失败?

  12. 12

    为什么未在Google Maps(JavaScript)中显示此SVG?

  13. 13

    Gmap3 Google Maps使用地理编码的位置将地图居中

  14. 14

    Gmap3 Google Maps使用地理编码的位置将地图居中

  15. 15

    为什么MissingKeyMapError使用带有质数的标签p:gmap(在最简单的示例中)?

  16. 16

    Gmap,jQuery和Google地图

  17. 17

    为什么即使我在JSFiddle中声明ng-app =“ MyApp”,也为什么需要angular.bootstrap

  18. 18

    Map Controller中的ui-gmap-marker的标记单击事件未触发

  19. 19

    为什么Google Maps API中未定义我的Maps对象

  20. 20

    Kendo UI和Google Maps

  21. 21

    在Angular-Google-Maps中添加标记

  22. 22

    Typescript或Angular 2中的Google Maps

  23. 23

    ui-gmap-markers不起作用

  24. 24

    建模成ui-gmap-marker

  25. 25

    Windows为什么需要withSocketsDo?

  26. 26

    为什么不需要Google Maps API密钥来做到这一点?

  27. 27

    将GMap.NET用于Google Maps的问题。无法连接到互联网并且出现错误CS0246

  28. 28

    为什么需要UI线程检查

  29. 29

    pharo中的Windows UI

热门标签

归档