我尝试使用 AngularJS 实现谷歌地图 infoWindow。
我有一个模板 <div>{{foo}}<br/>
, 与 $scope.foo="bar"
我想查看值为“bar”的信息窗口,而不是查看“{{foo}}”。因此,我用它编译并设置了内容,但还没有运气。
有些人可能认为这是重复的
AngularJS ng-include inside of Google Maps InfoWindow? ,但我想动态编译内容。
这是我现在拥有的代码,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);
})
我在想
$scope.apply()
,但无法在代码中运行。有没有办法让谷歌地图信息窗口
$compile
d?
最佳答案
您快到了!
你是对的,需要做一个 $scope.$apply
触发模板解析x
,但由于您已经处于摘要周期的中间,请调用 $scope.$apply
会给你一个$rootScope:inprog
错误。您需要创建一个新的摘要循环,调用 $scope.$apply
:
$scope.$evalAsync(function() {
$scope.$apply();
infowindow.setContent(el.html());
infowindow.open(map);
});
关于AngularJS google maps infoWindow 未编译,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/26384669/