Angularjs: setting/returning scope after long wait on http request

Question

I have a service that is making a call to UPS api and returning a promise. The request and return is taking an average around 3-4 seconds. After the return I am trying to set a scope for $scope.printOrder. It doesn't seem that Angular is picking up on such a long wait time. What are my options on making Angular wait for the request, or is it and I am doing something else wrong.

Thanks

Service

ordersApp.factory('upsPrint', function ($http, $q)
    {
        return {
            upsPrint: function (order)
            {
                var deferred = $q.defer();

                $http.post('orders/upsPrint',{order: order}).success(function(data)
                {
                    deferred.resolve(data);
                });

                return deferred.promise;
            }
        };
    });

Controller

$scope.printOrder = function (order)
    {
        $scope.printingOrder = upsPrint.upsPrint(order);

        $scope.printingOrder.then(function(upsPrint){
            $scope.printedOrder = upsPrint.printedOrder;
            console.log($scope.printedOrder);
        });
    };

View

<div ng-controller="ordersCtrl">
    <div ng-model="printedOrder">
        {{printedOrder}}
    </div>
</div>

nope not timing out. It's returning data as confirmed with console.log($scope.printedOrder) — SuperNinja
– SuperNinja, Commented Aug 5, 2013 at 1:48
so, on a whim I changed $scope.printedOrder to $scope.printLabel. Having $scope.printedOrder and upsPrint.printedOrder seemed to be the issue......need to get my head around that one. — SuperNinja
– SuperNinja, Commented Aug 5, 2013 at 1:55

shaunhusain · Accepted Answer · 2013-08-05 02:40:21Z

You should have ng-controller defined on that div or somewhere above it in the HTML hierarchy no ng-model.

Here's a fiddle that shows it working:

http://jsfiddle.net/5ZJrH/

I had to update the value in the braces {{}} since in the scope for the controller the variable name was different.

The JS

ordersApp = angular.module("ordersApp", []);



ordersApp.factory('upsPrint', function ($http, $q)
    {
        var service = {
            printedOrder:{},
            upsPrint: function (order)
            {
                var deferred = $q.defer();
                deferred.resolve("test");
                service.printedOrder = "test";
                //$http.post('orders/upsPrint',{order: order}).success(function(data)
                //{
                //    deferred.resolve(data);
                //});

                return deferred.promise;
            }
        };
        return service;
    });


ordersApp.controller("ordersCtrl", function($scope, upsPrint) {
    $scope.printOrder = function (order)
    {
        $scope.printingOrder = upsPrint.upsPrint(order);

        $scope.printingOrder.then(function(upsPrint){
            $scope.printedOrder = upsPrint.printedOrder;
            console.log($scope.printedOrder);
        });
    };

    $scope.printOrder(1);
});

The HTML

<div ng-app="ordersApp" ng-controller="ordersCtrl">
    <div>
        {{printingOrder}}
    </div>
</div>

I updated the fiddle again to just use the returned promise in the controller, I've read that this works fine but haven't used it in any of my code yet:

http://jsfiddle.net/5ZJrH/1/

sorry that's excluded from my question. It is in a div in the HTML hierarchy, will update the question showing.

zs2020 · Accepted Answer · 2013-08-05 14:20:42Z

1

Since upsPrint returns a promise, then by doing this

$scope.printingOrder = upsPrint.upsPrint(order);

will just assign the promise to printedOrder, which is not the right thing. You can try

upsPrint.upsPrint(order).then(function(data){
    $scope.printingOrder = data;
});

edited Aug 5, 2013 at 14:20

answered Aug 5, 2013 at 2:56

zs2020

54.7k30 gold badges157 silver badges223 bronze badges

1 Comment

Greg Over a year ago

he's actually using 2 different values in scope: printingOrder and printedOrder. I think you didn't catch that, though I agree that putting the promise in the scope is not useful here.

Collectives™ on Stack Overflow

Angularjs: setting/returning scope after long wait on http request

2 Answers 2

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related