javascript - AngularJS:使用服务进行多个解析的路由不会触发

Question

我正在配置一个 AngularJS 应用程序，但在确保我的 promise 在 Controller 加载之前触发时遇到了一些麻烦。我的理解是这是可以做到的。一些代码:

首先，这是路由器代码:

$routeProvider
    .when('/apage', {
        controller: 'APageController',
        templateUrl: 'app/apage/apage.view.html',
        requiresLogin: true,
        resolve: {
            "data": function($q, data1Service, data2Service) {
                var data1 = data1Service.getData();
                var data2 = data2Service.getData();
                return $q.all({
                    data1: data1.$promise,
                    data2: data2.$promise});
            }   
        }   
    })
... 

这是其中一个服务功能(两者相似)...

function getData() {
    var deferred = $q.defer();
    $http(req)
        .success(function(data, status, headers, config) {
            // store data ...
            deferred.resolve(1); // just a flag to say it worked
            $rootScope.$apply();
        })
        .error(function(data, status, headers, config) {
            deferred.resolve(0);
            $rootScope.$apply();
        });
    return deferred.promise;
}

这是 Controller 代码...

angular
    .module('app')
    .controller('APageController', APageController);
  
    APageController.$inject = [... 'data'];
    function APageController(... data) {
        var data1 = data.data1;
        var data2 = data.data2;
        ...

这三个文件位于不同的文件中，但属于同一模块。一定有一些我忽略的概念。这里有什么明显的东西可以解释为什么我的决心 promise 没有触发吗？

谢谢。

Answer 1

如果您将对象文字传递给q.all，它将立即解析。相反，传递一系列 promise ，以便等待它解决拒绝问题。此外，您的情况不需要 .$promise ，因为您已经从服务返回了 promise (基于显示的代码)。 $promise 通常附加在 $resource

返回的对象上

即

return $q.all([data1Service.getData(),
               data2Service.getData()]);

并期望 data 是从上述 2 个调用解析的数据数组。

或创建 2 个解析:

 resolve: {
        "data": function($q, data1Service, data2Service) {
            return data1Service.getData();
        },
        "data2": function($q, data1Service, data2Service) {
            return data2Service.getData();
        }    
    }   

并注入(inject)data和data2。

否则，请链接并更改响应格式以期望您最初想要获得的方式。

   resolve: {
        "data": function($q, data1Service, data2Service) {
            return $q.all([data1Service.getData(),data2Service.getData()])
                  .then(function(response){
                   return {
                           data1:response[0], 
                           data2:response[1]
                          };
                });
        }   
    }   

不要将 rootScope.apply 放在您的服务中，这会导致摘要已在进行中错误(因为 Angular 会)。 $http 会自动解析它。

你只需要这个。

function getData() {
    return $http(req);
}