javascriptangularjsgoogle-mapssteroidssupersonic

$scope push doesn't work angularjs


I have an issue with this code.

In my controller I have this.

$scope.spiagge = [];
var distanza = function(info, posizione) {
        var request = {
            origin : posizione,
           destination : new google.maps.LatLng(info.latitudine, info.longitudine),
           travelMode : google.maps.TravelMode.DRIVING
       };
       directionsService.route(request, function(response, status) {
           if (status == google.maps.DirectionsStatus.OK) {
               //$scope.directionsDisplay.setDirections(response);

               info.distanza = response.routes[0].legs[0].distance.text;

               //distanza= response.routes[0].legs[0].distance.value/1000 ;
           }

        riempi(info);

    });
//riempi(info);
}
var riempi = function(spiaggia) {
    //alert("distanza " + spiaggia.distanza);
    $scope.spiagge.push(spiaggia);
}

If I put riempi(info) outside the directionsService function, $scope.spiagge.push works without info.distanza. I think this is because info.distanza is a local variable of directionService . If I put inside, like in the code here, it doesn't work at all; but the riempi function sees every value of info, distanza included.

I don't know what to do. This is the view

<div class="lista_home" ng-repeat= "spiaggia in spiagge">
    <h1>{{spiaggia.nome}}</h1> <p>distanza {{spiaggia.distanza}} km </p>
  </div>

Sorry for my english. Any idea?

Thanks.


Solution

  • Since googlemaps isn't ummm... 'angular' the view won't update. Can you try adding $scope.$apply(); at the end of your $scope.riempi function?