AngularJS google maps infoWindow is not compiled -
AngularJS google maps infoWindow is not compiled -
i tried implement google maps infowindow using angularjs.
i have template <div>{{foo}}<br/>
, $scope.foo="bar"
i want see info window value "bar" instead of seeing "{{foo}}". thus, compiled , set contents it, no luck yet.
some may think duplicate angularjs ng-include within of google maps infowindow?, want compile contents dynamically.
here code have now, http://plnkr.co/edit/rldacagz5ffmjezi87ah?p=preview
angular.module('myapp', []).controller('myctrl', function($scope, $compile) { var mylatlng = new google.maps.latlng(-25.363882,131.044922); var mapoptions = { zoom: 4, center: mylatlng }; var map = new google.maps.map(document.getelementbyid('map-canvas'), mapoptions); var infowindow = new google.maps.infowindow({position: mylatlng}); var x = "<div>{{foo}}<br/>{{foo}}"; $scope.foo="bar"; var el = $compile(x)($scope); infowindow.setcontent(el.html()); infowindow.open(map); })
i thinking $scope.apply()
, not able run in code.
is there way have google maps infowindow $compile
d?
you're there!
you're right needing $scope.$apply
trigger parsing of template x
, since you're in middle of digest cycle, calling $scope.$apply
give $rootscope:inprog
error. you'll need create new digest cycle phone call $scope.$apply
:
$scope.$evalasync(function() { $scope.$apply(); infowindow.setcontent(el.html()); infowindow.open(map); });
updated plunker difference between $timeout , $evalasync angularjs google-maps angularjs-google-maps
Comments
Post a Comment