Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p>After you add the <code>content</code> to the DOM, you'll need to find it (maybe with a jQquery selector?), then <code>$compile</code>() 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).</p> <p>E.g., <code>$compile(foundElement)(scope)</code></p> <p>Without more code, it is difficult to give a more precise answer. However, here is a <a href="https://stackoverflow.com/a/14046556/215945">similar question and answer</a> you can look at.</p> <p><strong>Update:</strong> okay, I finally got this to work, and I learned a few things.</p> <pre><code>google.maps.event.addListener( marker, 'click', (function( marker , scope, localLatLng ){ return function(){ var content = '&lt;div id="infowindow_content" ng-include src="\'infowindow.html\'"&gt;&lt;/div&gt;'; 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 ) </code></pre> <p>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 <code>content</code> against the <code>scope</code>, 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 <code>scope.latLng</code> because the ng-included template needs to interpolate <code>{{latLng[0]}}</code> and <code>{{latLng[1]}}</code>. I used <code>innerHTML</code> instead of <code>outerHTML</code> so that only the contents of infowindow.html are inserted.</p> <p><a href="http://plnkr.co/edit/7yQWY0?p=preview" rel="nofollow noreferrer">Plunker</a>.</p> <p><strong>Update2:</strong> 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:</p> <pre><code>&lt;script type="text/ng-template" id="/test.html"&gt; &lt;h4&gt;{{latLng[0]}},{{latLng[1]}}&lt;/h4&gt; &lt;/script&gt; </code></pre> <p>I was using that in addListener():</p> <pre><code>var content = '&lt;div id="infowindow_content" ng-include src="\'/test.html\'"&gt;&lt;/div&gt;'; </code></pre> <p>I changed the plunker to use the inlined template.</p>
    singulars
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. VO
      singulars
      1. This table or related slice is empty.
    2. VO
      singulars
      1. This table or related slice is empty.
    3. VO
      singulars
      1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload