The variable scope/nesting of AngularJS variables

Question

I have this angular controller:

app.controller('FeedCtrl', function ($scope, Profile) {
$scope.getID = function() {
    Profile.getUID()
        .then(function (data) {
            if (data !== null) {
                console.log(data.id); // returns correct id
                $scope.data = data;
            } else {
                console.log("Could not retrieve id");
            }
        }, function (error) {
            console.log(error);
        });
    console.log($scope.data); // logs: undefined

    return $scope.data; // logs: undefined
};

var somedata = $scope.getID();
console.log(somedata); //just returns undefined

});

And this Factory that the controller uses for a JSON request.

module.factory('Profile', function($http, $localStorage) {

    return {
        getUID:function(){
            return $http.get("https://graph.facebook.com/v2.2/me", {params: { access_token: $localStorage.accessToken, fields: "id,name,gender,location,website,picture,relationship_status", format: "json" }})
                .then(function(response) {
                if (typeof response.data === 'object') {
                    return response.data;
                } else {
                    // invalid response
                    return $q.reject(response.data);
                }

            }, function(response) {
                // something went wrong
                return $q.reject(response.data);
            });
        }

    };

});

The Question

I am unable to change the value of $scope.data for use outside the $scope.getID function but inside the rest of the FeedCtrl.

If you look on the comments you see what I am getting returned in the console logs.

I've tried to understand this problem by searching here in StackOverflow and Google but it seems that I don't understand the $scope concept of AngularJS.

I am grateful for any push in the right direction.

Btw; looks like you forgot to inject the `$q´ service in your factory — Robin-Hoodie
– Robin-Hoodie, Commented Mar 29, 2015 at 19:44
Just realised it after my post, and thanks for the sharp eyes and help! — Carl
– Carl, Commented Mar 29, 2015 at 23:11

Robin-Hoodie · Accepted Answer · 2015-03-29 19:32:24Z

3

That's a classic mistake, the code you're calling is asynchronous, look at your console and watch the order of your logs, the log that will return the correct id will be the last one because it will be called only after the promise has been resolved.

Is this enough of a push in the right direction for you?

A very simple example, but it's the same principle.

setTimeout(function(){
  document.write('A2: Timeout is done');
}, 5000);

document.write('A1: Called timeout, this gets logged before A2 even though my line number is higher.');

edited Mar 29, 2015 at 19:32

answered Mar 29, 2015 at 19:26

Robin-Hoodie

4,9944 gold badges33 silver badges65 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Robin-Hoodie Over a year ago

To whoever downvoted this: could you tell me what I should change so that I can update my post if warranted?

Guffa · Accepted Answer · 2015-03-29 19:33:58Z

3

That is not a scope problem, it's a time problem. You are trying to use the value before it exists.

In the controller you can only use the value after the result has arrived, i.e. in the callback for the then method. The return statement runs before there is a result, so you can't return it.

Once you have made an asynchronous call, the result has to be handled asynchronously. You can return a Future object to handle the result when it arrives, but you can never make a function that makes an asynchronous call and returns the result itself.

answered Mar 29, 2015 at 19:33

Guffa

703k111 gold badges760 silver badges1k bronze badges

Comments

Community · Accepted Answer · 2017-05-23 12:14:34Z

2

Your code is asynchronous. I wrote a response to this exact same problem in this post.

Returning after ajax call prints false

edited May 23, 2017 at 12:14

CommunityBot

11 silver badge

answered Mar 29, 2015 at 19:27

Rainer Plumer

3,7533 gold badges28 silver badges42 bronze badges

Collectives™ on Stack Overflow

The variable scope/nesting of AngularJS variables

The Question

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

The Question

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related