AngularJS NG-包括谷歌地图信息窗口里面？ [英] AngularJS ng-include inside of Google Maps InfoWindow?

问题描述

我想包括模板文件的意见/ infowindow.html 从服务信息窗口我的内容，我写信给启动谷歌地图API：

I'm trying to include a template file views/infowindow.html as the content of my InfoWindow from service I wrote to initiate the google maps 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

然而，似乎角不处理内容当它插入到信息窗口（通过开发工具检查code时，code这被插入为＆LT; D​​IV NG-包括SRC ='意见/ infowindow.html'＆GT;＆LT; / DIV＆GT; ）

However, it seems that Angular is not processing content when it is inserted into the InfoWindow (when inspecting the code via Dev Tools, the code that gets inserted is <div ng-include src="'views/infowindow.html'"></div>).

我希望将角pre-过程中我有它插入到信息窗口前，但很可惜没有。

I was hoping Angular would pre-process my include before it was inserted into the InfoWindow, but alas no.

是什么，我试图做可能吗？

Is what I'm trying to do possible?

我在想，我必须以某种方式缓存模板，将其传递给 infowindow.setContent（）过，但我不知道该怎么做（如该甚至是我的应的做）。我将preFER加载上的事件，而不是缓存模板和注入它为每个标记

I'm thinking that I'll have to somehow cache the template before passing it to infowindow.setContent(), but I don't know how to do that (or if that's even what I should be doing). I would prefer to load the template on the event instead of caching and injecting it for each marker.

修改纵观$ templateCache和一个相关 SO质疑。

EDIT Looking at $templateCache and a related SO question.

编辑2 这里有一个普拉克任何试图使用 $编译（信息窗口的内容仍然＆LT; D​​IV ID =infowindow_contentNG-包括SRC ='infowindow.html'＆GT;＆LT; / DIV＆GT; ）

EDIT 2 Here's a plunk that tries to use $compile (the content of InfoWindow is still <div id="infowindow_content" ng-include src="'infowindow.html'"></div>)

其基础来自下面 马克的回答。在他的解决方案，为信息窗口内容编译首先点击（任何标记），但信息窗口不直到任何标记再点击一下实际打开，可能是因为是的GoogleMaps不耐烦。

The basis for this came from Mark's answer below. In his solution, the content for InfoWindow is compiled on first click (of any marker) but the InfoWindow does not actually open until another click on any Marker, probably because GoogleMaps is impatient.

移动 $编译外，然后使编译模板到 .addListener 解决了这个问题：

Moving the $compile outside and then passing the compiled template into .addListener solves this problem:

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 。

推荐答案

在你的内容添加到DOM，您将需要一个找到它（也许jQquery选择？），那么 $编译（），并将其应用到合适的范围。这将导致角度解析您的内容和行为上发现的任何指令（如NG-包括）。

After you add the content to the DOM, you'll need to find it (maybe with a jQquery selector?), then $compile() it and apply it to the appropriate scope. This will cause Angular to parse your content and act on any directives it finds (like ng-include).

如， $编译（foundElement）（范围）

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

Without more code, it is difficult to give a more precise answer. However, here is a similar question and answer you can look at.

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

Update: okay, I finally got this to work, and I learned a few things.

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 )

我是IM pression只有DOM元素可能是$汇编下 - 即，我首先要添加内容到DOM，然后再编译。事实证明并非如此。以上，我首先编译内容对范围，然后将其添加到DOM。 （我不知道这可能会破坏数据绑定 - 即$腕表（）由$编译分别设立了ES）我必须设置 scope.latLng 因为NG-包括模板需要插 {{的latLng [0]}} 和 {{的latLng [1]}} 。我用的innerHTML 而不是 outerHTML ，以便只infowindow.html的内容被插入。

I was under the impression that only DOM elements could be $compiled -- i.e., that I first had to add the content to the DOM, and then compile it. It turns out that is not true. Above, I first compile content against the scope, and then add it to the DOM. (I don't know if this might break databinding -- i.e., the $watch()es that were set up by $compile.) I had to set scope.latLng because the ng-included template needs to interpolate {{latLng[0]}} and {{latLng[1]}}. I used innerHTML instead of outerHTML so that only the contents of infowindow.html are inserted.

Plunker 。

UPDATE2：点击不工作的第一次。看来，infowindow.html未加载，直到第二次点击（我打过电话的范围。$适用（）第二次......没有帮助）。当我有plunker工作，我已经内联infowindow.html的内容的index.html：

Update2: Clicking does not work the first time. It appears that 'infowindow.html' is not loaded until a second click (I tried calling scope.$apply() a second time... didn't help). When I had the plunker working, I had inlined the contents of infowindow.html in index.html:

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

我是用在的addListener（）：

I was using that in addListener():

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

我改变了plunker使用内联模板。

I changed the plunker to use the inlined template.

这篇关于AngularJS NG-包括谷歌地图信息窗口里面？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！