Я пытаюсь включить файл шаблона views/infowindow.html
в качестве содержимого моего InfoWindow из службы, которую я написал, чтобы инициировать карты google 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
Однако, кажется, что Angular не обрабатывает content
, когда он вставлен в InfoWindow (при проверке кода с помощью Dev Tools вставленный код <div ng-include src="'views/infowindow.html'"></div>
).
Я надеялся, что Angular будет предварительно обработать мой include до того, как он будет вставлен в InfoWindow, но, увы, нет.
Я пытаюсь сделать это?
Я думаю, что мне придется каким-то образом кэшировать шаблон, прежде чем передать его на infowindow.setContent()
, но я не знаю, как это сделать (или если это даже то, что я должен делать). Я бы предпочел загружать шаблон в событие вместо кэширования и вводить его для каждого маркера.
РЕДАКТИРОВАТЬ Глядя на $templateCache и связанный вопрос SO.
EDIT 2 Здесь plunk, который пытается использовать $compile
(содержимое InfoWindow по-прежнему <div id="infowindow_content" ng-include src="'infowindow.html'"></div>
)
Решение
Основа для этого взята из Отметьте ответ ниже. В своем решении содержимое 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