Angularjs data is null from async service in scope

Question

thanks in advance for read my post.

I have a service, like this:

angular.module('myApp.services')
.factory('myService', function($http, $q) {
    var myService = {
        getId: function() {
            var defer = $q.defer();

            $http.get('http://xxxxxxxxxxxxxxxxxx/id/')
            .success( function(data) {
                defer.resolve(data);
            })
            .error( function(data) {
                defer.reject(data);
            });

            return defer.promise;
        },
        begin : function(jsonBegin) {
            var defer = $q.defer();

            $http.post('http://xxxxxxxxxxxxxxxxxxxxxxx/begin/?format=json', jsonBegin)
            .success( function(data) {
                defer.resolve(data);
            })
            .error( function(data) {
                defer.reject(data);
            });

            return defer.promise;
        }
    };

    return myService;
});

A parent controller (works fine):

angular.module('myApp.controllers')
.controller('controllerA', function($scope, myService) {
    myService.getId()
        .then(function(data) {
            $scope.bID = data.bID;
        });
});

And child controller:

angular.module('myApp.controllers')
.controller('controllerB', function($scope) {
    console.log($scope.$parent.bID);
});

The console.log value for bID is undefined, do u know why? I am setting that variable in the parent controller trough myService service. I guess my problem is due to the asynchronous call but I'm not sure.

Thanks.

yes your guess is correct..but what you wanted to do exactly? — Pankaj Parkar
– Pankaj Parkar, Commented Aug 26, 2015 at 20:28
Is metaApiService the same as myService? Did you mean to change it to the same in both places? — lintmouse
– lintmouse, Commented Aug 26, 2015 at 20:30
when console.log is called the request is not arrive from the server jet. if(metaApiService == myService) Your code is fine. — chfumero
– chfumero, Commented Aug 26, 2015 at 20:31
Yes guys, metaApiService == myService, It was my mistake. I changed the name in the code. — Sommer
– Sommer, Commented Aug 26, 2015 at 20:42

lintmouse · Accepted Answer · 2015-08-26 20:59:50Z

You could do something like this:

     angular.module('myApp.controllers')
        .controller('controllerA', function($scope, myService) {
            $scope.bID = myService.getId()
                .then(function(data) {
                    return data.bID;
                });
        });

    angular.module('myApp.controllers')
        .controller('controllerB', function($scope) {
            $scope.$parent.bID.then(function(bID) { console.log(bID); });
        });

The child scope will wait for the parent to resolve bID. And when parent bID is already resolved, it will immediately return the value in the child scope promise. It's a little messy looking though.

The alternative is to have the myService request resolve before the controller loads. Check this out:

http://www.codelord.net/2015/06/02/angularjs-pitfalls-using-ui-routers-resolve/

Then you can set the parent scope to the resolved value and access it as a normal property in the child scope.

chfumero · Accepted Answer · 2015-08-26 20:43:03Z

0

The problem is that the console.log code is excuted when the controller is initialized, in that time the response do't arrive with the results on the parent controller.

Try to put this code on your test controller.

angular.module('myApp.controllers')
.controller('controllerB', function($scope, $timeout) {

     // waith 1second for the server response on the parent controller
     $timeout(function(){
         console.log($scope.$parent.bID);
     }, 1000);        
});

FYI. This work console.log($scope.bID) check scope inheritance.

answered Aug 26, 2015 at 20:43

chfumero

1,1572 gold badges15 silver badges28 bronze badges

3 Comments

lintmouse Over a year ago

The possible issue with that is if the service request doesn't return within the timeout period.

chfumero Over a year ago

@dustmouse you are rigth, but this is just a example to check what happen here. In a more realistic scene must be provided some sort of solution to wait for the response. That is another problem.

lintmouse Over a year ago

Agreed, but it still depends on how long the service takes to respond. However, you are right that you can test it this way.

Collectives™ on Stack Overflow

Angularjs data is null from async service in scope

2 Answers 2

Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related