Angular JS Promise only resolving in markup, not model

Question

I'm having an issue resolving my promise—the strange this is that in my markup:

{{details.customer_email}}

It resolves properly, and displays the e-mail address returned by the '$http` request.

However, attempting to access this:

$scope.user = {
    ...
    emailAddress : $scope.details.customer_email,
    ...
};

is null.

Here's the relevant block:

$scope.session = {
    is_authenticated: false,
    customer_email: null
};

var detailsDeferred = $q.defer();

$scope.details = detailsDeferred.promise;

$scope.authed = function () {

    $http({
        url: 'http://api.foo/auth',
        withCredentials: true,
        method: "GET",
        headers: {
            'Content-Type': 'application/x-www-form-urlencoded'
        }
    }).success(function (data, status, xhr) {

            $scope.session = {
                is_authenticated: data.is_authenticated,
                customer_email: data.customer_email
            };

            detailsDeferred.resolve($scope.session);


        })
        ...

    return $scope.session;

};

$scope.authed();

$scope.user = {
    ...
    emailAddress: $scope.session.customer_email
        ...
    };

Ye Liu · Accepted Answer · 2013-07-29 20:46:40Z

1

It's working in your markup is because angular's template engine is "promise aware", it's very convenient.

Quoted from the doc:

$q promises are recognized by the templating engine in angular, which means that in templates you can treat promises attached to a scope as if they were the resulting values.

In your JavaScript code, however, you have to handle it all by yourself:

$scope.user = {
    ...
    emailAddress : null,
    ...
};

$scope.details.then(function(details) {
    $scope.user.emailAddress = details.customer_email;
});

answered Jul 29, 2013 at 20:46

Ye Liu

8,9861 gold badge40 silver badges34 bronze badges

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

3 Comments

couzzi Over a year ago

Thank you! Worth noting that I had to redefine the entirety of the $scope.user object inside the then() in order to get it to work. Not sure why that is...

Ye Liu Over a year ago

You might want to use defer/promise in your $scope.user as well, my 2 cents.

Ye Liu Over a year ago

Update your question with your progress and new issues.

Collectives™ on Stack Overflow

Angular JS Promise only resolving in markup, not model

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related