CODEWITHSUNDEEP
javascriptangularjs
Carlos Andres
Carlos Andres

Reputation: 89

Angular $scope values set in reverse order

I have been working on Angular for one month now. I have been struggling with scoping and keeping state between views.

I don't know how to debug in angular, so I use the console to track the values of the scope when a view is loaded.

This is one of my controllers:

.controller('LegDetailCtrl',function($scope,$stateParams, LegService,ControllerService){
    $scope.reservation = ControllerService.getReservation();
    LegService.getLeg($stateParams.legId).then(function(data){
        ControllerService.setLeg(data.data);
        $scope.leg = data.data;
        console.log('Check leg',angular.toJson($scope.leg));
    });

    $scope.seats = LegService.getSeats();
    $scope.pax = LegService.getPax();
    $scope.user = ControllerService.getUser();
    $scope.reservation.leg = $scope.leg;
    $scope.reservation.client = $scope.user;
    $scope.reservation.pax = $scope.pax;
    console.log('Check scope leg', angular.toJson($scope.leg));
})

As I understand, in JS the execution is made in order from top to bottom (not sure of this). I think this way, I am processing and then setting the $scope.leg value, then I use it to feed the $scope.reservation object.

To me, the correct console output would be:

log Check leg, {aJsonObject}
log Check scope leg, {anotherJsonObject}

But what I get is this:

log Check scope leg,
log Check leg, {aJsonObject}

So, it looks like it sets all the values to the scope and then, executes the LegService.getLeg() method.

How do I make this to run in the correct order?

Thanks in advance.

Upvotes: 0

Views: 265

Answers (3)

cbass
cbass

Reputation: 2558

If you're using chrome there's a great debugging tool for AngularJS apps called Batarang .

To solve your problem you can chain your promises like below.

function LegDetailCtrl($stateParams, LegService, ControllerService){
    var vm=this;
    vm.reservation=ControllerService.getReservation();

    LegService
        .getLeg($stateParams.legId)
        .then(function(data){
            ControllerService.setLeg(data.data);
            vm.leg=data.data;
            return data.data;
        })
        .then(function(data) {
            var user=ControllerService.getUser();
            var pax=LegService.getPax();
            var seats=LegService.getSeats();

            vm.seats=seats
            vm.pax=pax
            vm.user=user
            vm.reservation.leg=vm.leg;
            vm.reservation.client=user
            vm.reservation.pax=pax
        });
}
LegDetailCtrl.$inject=['$stateParams', 'LegService', 'ControllerService'];

angular
    .module('yourModule')
    .controller('LegDetailCtrl', LegDetailCtrl)

Upvotes: 2

Oliver
Oliver

Reputation: 31

The .then( in the following line

LegService.getLeg($stateParams.legId).then(function(data){

is an asynchonous call to the function inside the then-block (which contains the "Check leg")

The execution is deferred till the event loop of javascript is empty (javascript is only single threaded). That means that the code of the main function is executed first (result is "Check scope leg") and after that the async call inside the then-block is executed ("Check leg")

Upvotes: 1

rayners
rayners

Reputation: 539

If you ran this code outside of the browser, you'd find that the console.log call within the callback you passed to then is never called at all. That is because the callback is not called until the promise returned by getLeg is resolved, and that won't happen until the next angular $digest cycle.

Upvotes: 0

Related Questions