$scope push doesn't work angularjs

Question

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.

is the `directionsService` an async call? request, response seems async, and it looks like you might be trying to call your function before you have received the data back, meaning you'll be passing `null`. — Claies, Apr 03 '15 at 14:29
Thanks for your answer. I think it is, there's no way to wait the result? — Vincenzo, Apr 03 '15 at 14:43
@Claies Could also be the case indeed, but then you should resolve the promise returned by the call and continue with `.then` or something. Hmmm, but what I don't get is this `if (status == google.maps.DirectionsStatus.OK)` so I guess the promise is already resolved there??? — Michelangelo, Apr 03 '15 at 14:55
Yes, `if (status == google.maps.DirectionsStatus.OK)` is just to be sure that the call to googlemaps DirectionsService is ok — Vincenzo, Apr 03 '15 at 15:59
@Vincenzo Ok, thanks I see. So my `$rootScope` solution did not bring you the desired result? Calling $scope.$apply() is really last resort if you ask me. — Michelangelo, Apr 04 '15 at 13:15

score 0 · Answer 1 · answered Apr 03 '15 at 14:47

What I think that happens is that when it is inside the directionService the function is out of scope. You can try to reach the function with $rootScope. Instead of making a variable add it the function to the scope of the controller. Also don't forget to inject $rootScope as a dependency in your controller.

$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;
               }

            $rootScope.riempi(info);//go to the rootscope and find riempi

        });

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

score 0 · Accepted Answer · answered Apr 03 '15 at 16:03

0

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?

answered Apr 03 '15 at 16:03

Hoyen

2,511
1
12
13

$scope push doesn't work angularjs

2 Answers2