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

Question

我试图在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，一切都很好。

Answer 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>