AngularJS google maps infoWindow 未编译答案

【问题标题】：AngularJS google maps infoWindow is not compiledAngularJS google maps infoWindow 未编译
【发布时间】：2014-12-10 15:43:40
【问题描述】：

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

有没有办法让谷歌地图信息窗口$compiled？

【问题讨论】：

标签： angularjs google-maps angularjs-google-maps

【解决方案1】：

你快到了！

您需要执行$scope.$apply 来触发解析模板x 是对的，但是由于您已经处于摘要周期的中间，因此调用$scope.$apply 会给您一个$rootScope:inprog 错误.您需要创建一个新的摘要循环，并在其中调用$scope.$apply：

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

【讨论】：