Angularjs:在http请求上等待很长时间后设置/返回作用域

Question

我有一个服务正在调用UPSAPI并返回承诺。请求和返回平均需要3-4秒。返回后，我试图为$scope.printOrder设置一个范围。Angular似乎没有占用这么长的等待时间。我有什么选择让Angular等待请求，或者它和我做错了什么。

感谢

服务

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;
            }
        };
    });

控制器

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

查看

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

Answer 1

您应该在该div上或在HTML层次结构中的某个位置定义ng控制器，而不是ng模型。

这是一把小提琴，显示它的工作：

http://jsfiddle.net/5ZJrH/

我不得不更新大括号｛｛｝｝中的值，因为在控制器的作用域中，变量名是不同的。

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);
});

HTML

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

我再次更新了fiddle，只在控制器中使用返回的promise，我读到这很好，但还没有在我的任何代码中使用它：

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

Answer 2

由于upsPrint返回一个promise，那么通过执行此

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

只会将promise分配给printedOrder，这不是正确的做法。你可以试试

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