Reputation: 1421
I have tried to implement dynamic map's (Google Map) Infowindow by $compile the content and set to the infowindow.
I would like the infowindow to show the data depended on the hovered/clicked Marker and user can click some button inside it to invoke the $scope's function.
All data bindings work fine (all value comes) except the $scope's functions, when I click the button there is nothing triggered.
Here is some of my code:
map.directive.js
///////
function linkFn(scope, element, attrs) {
scope.mapPane = new MapPane();
scope.actionButton = function() {
alert('it should trigger this');
}
function MapPane() {
var self = this;
self.infoWindow = new google.maps.InfoWindow({..})
self.openInfoWindow = function() {
$timeout(function(){
var content = getContentByMarkerType();
var el = $compile(content)(scope);
self.infoWindow.setContent( el );
self.infoWindow.open( map, latlngObj )
}
}
}
}
For infowindow template, I use ng-bind for data value and ng-click="actionButton()" for invoke function, but nothing happen when click the button.
Did I do something wrong or forget something ?
Thank you.
Upvotes: 0
Views: 574
Reputation: 922
Have you tried this $compile pattern?
var compiled = $compile(template);
var elm = complied(scope);
element.append(elm);
This lets your template be fully created and delays the addition of scope values until it is.
Upvotes: 0