谷歌地图信息窗口内的AngularJS ng-include？

Question

我正在尝试将模板文件 views/infowindow.html 作为我为启动 google maps api 而编写的服务中的 InfoWindow 的内容：

for ( var count = locations.length, i = 0; i < count; i++ ) {

  var latLng  = locations[i],
    marker = new google.maps.Marker({
      …
    }),
    infowindow = new google.maps.InfoWindow();

  google.maps.event.addListener(
    marker,
    'click',
    (function( marker , latLng ){
      return function(){
        var content = '<div ng-include src="\'infowindow.html\'"></div>';
        infowindow.setContent( content );
        infowindow.open( Map , marker );
      }//return fn()
    })( marker , latLng )
  );//addListener

}//for

但是，当将content 插入信息窗口时，Angular 似乎没有处理它（通过开发工具检查代码时，插入的代码是<div ng-include src="'views/infowindow.html'"></div>）。

我希望 Angular 在将我的包含插入到 InfoWindow 之前对其进行预处理，但可惜没有。

我正在尝试做的事情可能吗？

我想在将模板传递给 infowindow.setContent() 之前，我必须以某种方式缓存模板，但我不知道该怎么做（或者我什至应该这样做正在做）。我宁愿在事件上加载模板，而不是为每个标记缓存和注入它。

编辑查看 $templateCache 和 related SO question。

EDIT 2这是一个尝试使用$compile的plunk（InfoWindow的内容仍然是<div id="infowindow_content" ng-include src="'infowindow.html'"></div>）

---

解决方案

这个基础来自Mark's answer below。在他的解决方案中，InfoWindow 的内容在第一次单击（任何标记）时编译，但 InfoWindow 直到再次单击任何标记时才真正打开，可能是因为 GoogleMaps 不耐烦。

将$compile移到外面，然后将编译后的模板传入.addListener就可以解决这个问题：

for ( … ) {
  …
  infowindow = new google.maps.InfoWindow();
  scope.markers …
  var content = '<div id="infowindow_content" ng-include src="\'infowindow.html\'"></div>';
  var compiled = $compile(content)(scope);

  google.maps.event.addListener(
    marker,
    'click',
    (function( marker , scope, compiled , localLatLng ){
      return function(){
        scope.latLng = localLatLng;//to make data available to template
        scope.$apply();//must be inside write new values for each marker
        infowindow.setContent( compiled[0].innerHTML );
        infowindow.open( Map , marker );
      };//return fn()
    })( marker , scope, compiled , scope.markers[i].locations )
  );//addListener

}//for

Updated Plunker.

Answer 1

在将 content 添加到 DOM 后，您需要找到它（可能使用 jQquery 选择器？），然后找到 $compile() 并将其应用于适当的范围。这将导致 Angular 解析您的内容并根据它找到的任何指令（如 ng-include）采取行动。

例如，$compile(foundElement)(scope)

没有更多的代码，很难给出更准确的答案。不过，这里有一个similar question and answer，你可以看看。

更新：好的，我终于开始工作了，我学到了一些东西。

google.maps.event.addListener(
      marker,
      'click',
      (function( marker , scope, localLatLng ){
        return function(){
          var content = '<div id="infowindow_content" ng-include src="\'infowindow.html\'"></div>';
          scope.latLng = localLatLng;
          var compiled = $compile(content)(scope);
          scope.$apply();
          infowindow.setContent( compiled[0].innerHTML );
          infowindow.open( Map , marker );
        };//return fn()
      })( marker , scope, scope.markers[i].locations )

我的印象是只有 DOM 元素可以被编译——也就是说，我首先必须将内容添加到 DOM，然后编译它。事实证明这不是真的。上面，我首先针对scope 编译content，然后将其添加到DOM。 （我不知道这是否会破坏数据绑定——即由 $compile 设置的 $watch()es。）我必须设置 scope.latLng 因为包含 ng 的模板需要插入 {{latLng[0]}} 和{{latLng[1]}}。我使用了innerHTML 而不是outerHTML，因此只插入了 infowindow.html 的内容。

Plunker.

Update2：第一次点击不起作用。似乎直到第二次单击才加载“infowindow.html”（我尝试再次调用 scope.$apply() ......没有帮助）。当我让 plunker 工作时，我在 index.html 中内联了 infowindow.html 的内容：

<script type="text/ng-template" id="/test.html">
  <h4>{{latLng[0]}},{{latLng[1]}}</h4>
</script>

我在 addListener() 中使用它：

var content = '<div id="infowindow_content" ng-include src="\'/test.html\'"></div>';

我将 plunker 更改为使用内联模板。

Answer 2

以上答案是可靠的，但您失去了对以下方面的约束：

infowindow.setContent( compiled[0].innerHTML );

改为这样做：

infowindow.setContent( compiled[0] );

否则，如果您有<div>{{myVar}}</div> 之类的内容，如果您的应用中更新了myVar，则它不会更新。

Answer 3

你试过编译功能吗？ http://docs.angularjs.org/api/ng.$compile

我还没有深入研究 Angular，但我认为这可行。

或者，您可以尝试引导这些东西。但我不相信这是正确的方法...http://docs.angularjs.org/guide/bootstrap