我正在尝试包含一个模板文件 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

但是，Angular 似乎没有处理content当它被插入到 InfoWindow 中时(当通过开发工具检查代码时，插入的代码是 <div ng-include src="'views/infowindow.html'"></div> )。

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

我想做的事情可行吗？

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

编辑 查看 $templateCache 和 related SO question .

EDIT 2 这是一个 plunk试图使用 $compile (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 .

最佳答案

将 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 元素可以被 $compiled —— 也就是说，我首先必须将内容添加到 DOM，然后再编译它。事实证明那不是真的。在上面，我首先针对 scope 编译 content，然后将其添加到 DOM。 (我不知道这是否会破坏数据绑定(bind)——即由 $compile 设置的 $watch()es。)我必须设置 scope.latLng 因为 ng-included 模板需要插入 {{latLng[0]}} 和 {{latLng[1]}}。我使用 innerHTML 而不是 outerHTML 以便只插入 infowindow.html 的内容。

Plunker .

更新 2: 第一次点击不起作用。似乎直到第二次单击才加载“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 以使用内联模板。

关于javascript - AngularJS ng-include 在 Google Maps InfoWindow 中？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/14226975/