如何在 ui-gmap-window 中使用 Angular 指令答案

【问题标题】：How to use Angular directives inside ui-gmap-window如何在 ui-gmap-window 中使用 Angular 指令
【发布时间】：2015-08-09 21:45:31
【问题描述】：

我正在尝试在 ui-gmap-window 中使用 Angular 指令。我意识到必须将 HTML 移动到模板文件中才能做到这一点。这是我的ui-gmap-window 代码：

<ui-gmap-window
  show="playerMap.window.show"
  coords="playerMap.window.model"
  options="playerMap.window.options"
  closeclick="playerMap.window.closeClick()"
  templateUrl="'/app/dmPlayerMap/infoWindow.html'"
  templateParameter="playerMap.infoWindowParams">
</ui-gmap-window>

这里是 infoWindow.html：

<div ng-if="true">
  <p>I'm true!!!</p>
</div>

每次我单击标记打开信息窗口时，“我是真的！！！”再次打印。因此，例如，十次点击后，它会打印十次。另外，我注意到控制台中出现以下错误：Uncaught TypeError: Cannot set property 'opacity' of undefined。如果我删除 ng-if 一切正常。

【问题讨论】：

标签： javascript angularjs google-maps angular-google-maps

【解决方案1】：

不知道为什么，但 Angular 指令似乎不能存在于模板中的顶级元素上。我将 infoWindow.html 更改为以下内容，现在它可以正常工作了：

<div>
  <div ng-if="true">
    <p>I'm true!!!</p>
  </div>
</div>

另外值得注意的是，你不能有两个顶级元素。在下面的示例中，最后一个 div 不会出现：

<div>
  <div ng-if="true">
    <p>I'm true!!!</p>
  </div>
  <div ng-if="true">
    <p>I'm not false!!!</p>
  </div>
</div>
<div>
  <div ng-if="true">
    <p>I won't appear!!!</p>
  </div>
</div>

【讨论】：