AngularJS google maps infoWindow가 컴파일되지 않았습니다.

Question

AngularJS를 사용하여 Google지도 infoWindow를 구현하려고했습니다.

은 내가 대신 보는 값이 "바"로 정보 창을 표시 할 $scope.foo="bar"

와 템플릿 <div>{{foo}}<br/>을 가지고 "{{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()을 생각하지만 코드를 실행할 수 없습니다.

Google지도가있는 방법이 있습니까? InfoWindow $compile d?

Answer 1

거의 다 왔어!

당신은 템플릿 x의 구문 분석을 트리거 할 $scope.$apply을 할 필요에 대한 맞아,하지만 당신은 당신에게 $rootScope:inprog 오류를 줄 것이다 $scope.$apply를 호출 다이제스트주기의 중간에 이미있어 때문이다.

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

• Updated plunker
• Difference between $timeout and $evalAsync

: 당신은 당신이 $scope.$apply 전화 새로운 소화주기를 만들어야합니다