Angular JS Promise，JSON数据和有趣的时间安排

Question

I'm really struggling with the promises here.
It's more than a day now, and I still can't figure it out.

I'm new to Angular and, more in general, to the promises "concept", so I'm sure there is something I'm missing, but I can't figure it out.


Basically, I'm calling a remote web service using a $post request, and in the success method I update some data on $rootScope

LoginService

this.login = function(url, request) {

    return $http.post( url, request ).
        success(function(data) {
            if (data.return_code === 0) {
                userData = {
                    name: data.name,
                    role: data.role
                }

                /* 
                 * Inside this function, $rootScope gets 
                 * updated with userData
                 */
                storage.update('user_details', userData)
            }
            else {
                // non authorized user
            }

            return userData

        }).
        error(function(data, status) {
            throw new Error()
        })

    }

Then, in the controller, I do something like

$scope.login = function(url, request) {
    loginService.login(url, request).then(function(response) {

        /* this is a ui.router redirection to the state 'home' */
        $state.go('home')
    })

}

The problem is that in the new page (the home state), $rootScope is not updated, unless I do a page reload, which "solves" the issue.

It seems to me that the call of the promise does not wait for it's completion for the page redirect, but even wrapping $state.go in a $timeout doesn't solve the issue...

I'm really lost, any help would be appreciated

Answer 1

If storage update is some async action you want to wait for until it is complete and it returns a promise then you can simply chain it:

this.login = function(url, request) {
    return $http.post(url, request).then(function(data){
        if (data.return_code === 0) {
            var userData = {
                name: data.name,
                role: data.role
            };
            return storage.update('user_details', userData).then(function(){
                return userData;
            });
        }
        else {

        }
    })
};

In usage:

loginService.login(...).then(function(userData){
    //You reach here only after storage.update was completed
    $state.go('home')
});