AngularJS谷歌地图信息窗口未编译。

Question

AngularJS谷歌地图信息窗口未编译。

angularjsgoogle-mapsangularjs-google-maps

4

我尝试使用AngularJS实现Google Maps 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()，但是在代码中无法运行。

是否有一种方法可以对谷歌地图InfoWindow进行$compile编译？

- allenhwkim

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Blaise · Answer 1

你已经接近成功了！

你说得没错，需要执行 $scope.$apply 来触发模板 x 的解析，但由于你已经处于一个脏检查周期中，调用 $scope.$apply 会导致 $rootScope:inprog 错误。你需要创建一个新的脏检查周期，在其中调用 $scope.$apply：

$scope.$evalAsync(function() {
  $scope.$apply();
  infowindow.setContent(el.html());
  infowindow.open(map);          
});