AngularJS，包括谷歌地图信息窗口内？(AngularJS ng-include inside

我想包括一个模板文件views/infowindow.html从服务信息窗口我的内容我写来启动谷歌地图API：

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时，它被插入到信息窗口（检查经由开发工具的代码时，即得到插入的代码被<div ng-include src="'views/infowindow.html'"></div>

我希望角将预先处理我包括它插入信息窗口前，但很可惜没有。

正是我试图做可能吗？

我在想，我得把它传递给前以某种方式缓存模板infowindow.setContent()但我不知道该怎么做（或者如果这是连我自己应该做的事情）。我宁愿要加载的事件，而不是高速缓存和它注入每个标记的模板。

编辑在$ templateCache展望和相关的SO问题。

编辑2这里的一个普拉克任何试图使用$compile （信息窗口的内容仍然是<div id="infowindow_content" ng-include src="'infowindow.html'"></div>

解

这样做的依据来自以下马克的回答。在他的解决方案，对信息窗口内容编译首先点击（内的任何标记），但信息窗口实际上并没有打开，直到上的任何标记再点击一下，可能是因为谷歌地图是不耐烦。

移动$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

更新Plunker 。

Answer 1:

你添加后content的DOM，你需要找到它（也许有jQquery选择？），然后$compile （），并将其应用到合适的范围。这将导致角度来分析它找到（像NG-包括）任何指示的内容和行为。

例如， $compile(foundElement)(scope)

如果没有更多的代码，它是很难给出更精确的答案。但是，这里有一个类似的问题和答案，你可以看看。

更新：好吧，我终于得到这个工作，我学到了一些东西。

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，然后编译它。事实证明，事实并非如此。以上，我首先编译content针对scope ，然后将其添加到DOM。（我不知道这可能会破坏数据绑定-即$表（）通过$编译分别设置一个或多个）我必须设置scope.latLng因为NG-包括模板需要插{{latLng[0]}}和{{latLng[1]}} 我用innerHTML ，而不是outerHTML因此只有infowindow.html的内容被插入。

Plunker 。

UPDATE2：单击不工作的第一次。看来，“infowindow.html”不加载，直到第二次点击（我打过电话的范围。$适用（）第二次......没有帮助）。当我有plunker工作，我已经内联infowindow.html的index.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

我没有考虑的角度很多，但我觉得这可能是工作。

您也可以试试自举的东西。但我不认为这是正确的方式... http://docs.angularjs.org/guide/bootstrap

文章来源: AngularJS ng-include inside of Google Maps InfoWindow?