0

我有一项服务正在调用 UPS api 并返回一个承诺。请求和返回平均需要大约 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>
4

2 回答 2

2

您应该在该 div 上或 HTML 层次结构中其上方的某个地方定义 ng-controller，而不是 ng-model。

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

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>

我再次更新了小提琴，只使用控制器中返回的承诺，我已经读到这很好，但还没有在我的任何代码中使用它：

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

于 2013-08-05T01:56:39.967 回答
1

既然upsPrint返回了一个承诺，那么通过这样做

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

只会将承诺分配给printedOrder，这是不正确的。你可以试试

upsPrint.upsPrint(order).then(function(data){
    $scope.printingOrder = data;
});
于 2013-08-05T02:56:30.560 回答