動態HTML與角JS和谷歌地圖infoWindow

Question

當試圖在infoWindow中顯示一些HTML時，我得到了一個問題。

在這個例子中，我想增加值$scope.number每次我點擊一個標記，問題是值正確增加（你可以console.log看到它），但infoWindow仍然顯示0

PS：我真的需要設置infoWindow內容爲document.getElementById

感謝和我的英語不好對不起：d

$scope.number=0; 
 
    
 
    $scope.infoWindow = new google.maps.InfoWindow({ 
 
    content: document.getElementById("infoWindow") 
 
    }); 
 

 
    
 
    navigator.geolocation.getCurrentPosition(function(pos){ 
 
    
 
    $scope.position = new google.maps.LatLng(pos.coords.latitude, pos.coords.longitude); 
 
     
 
    var mapOptions = { 
 
     center: $scope.position, 
 
     zoom: 7, 
 
     mapTypeId: google.maps.MapTypeId.ROADMAP 
 
    }; 
 

 
    $scope.map = new google.maps.Map(document.getElementById("map"), mapOptions); 
 
    
 
    var marker1 = new google.maps.Marker({ 
 
     position: new google.maps.LatLng(36.712215,3.196801), 
 
     map: $scope.map 
 
    }); 
 
     
 
    var marker2 = new google.maps.Marker({ 
 
     position: new google.maps.LatLng(36.759615,2.9286236), 
 
     map: $scope.map 
 
    }); 
 
      
 

 
    google.maps.event.addListener(marker1, "click", function(){ 
 
       
 
     $scope.number++; 
 
     
 
     if($scope.infoWindow) $scope.infoWindow.close(); 
 
     
 
     $scope.infoWindow.open($scope.map, this); 
 
     }); 
 

 
    google.maps.event.addListener(marker2, "click", function(){ 
 
     
 
     $scope.number++; 
 
     console.log($scope.number); 
 
     if($scope.infoWindow) $scope.infoWindow.close(); 
 
     
 
     $scope.infoWindow.open($scope.map, this); 
 
    }); 
 
    
 
    });

<div id="map" class="has-header"></div> 
 

 

 

 
<div ng-hide="true"> 
 
\t <div id="infoWindow"> 
 
     {{number}} 
 
    </div> 
 
</div>

Answer 1

當您在角度上下文之外遞增計數器$scope.number時，您可能需要觸發$scope.$apply();以反映範圍內的更改。

所以你google.maps事件處理中，你增加計數器$scope.number++後，打電話$scope.$apply();

google.maps.event.addListener(marker1, "click", function(){ 

     $scope.number++; 

     if($scope.infoWindow) $scope.infoWindow.close(); 

     $scope.infoWindow.open($scope.map, this); 
     $scope.$apply(); 
}); 
google.maps.event.addListener(marker2, "click", function(){ 

    $scope.number++; 
    console.log($scope.number); 
    if($scope.infoWindow) $scope.infoWindow.close(); 

    $scope.infoWindow.open($scope.map, this); 
    $scope.$apply(); 
}); 

另一個哈克選擇是包裹$scope.number++內$timeout。 $timeout也會觸發$digest循環。