javascript - 嵌套 Angular routeProvider 解析

Question

所以我有一个服务可以根据传递的参数返回一个数据集。让我们说

“红色小部件”、“蓝色小部件”、“词汇表”

我需要在第一次选择此路由时调用词汇表，它也将始终调用红色小部件的数据。

.config( ['$routeProvider', function( $routeProvider ){
    $routeProvider.when('/compare/:comparetype', {
        controller: 'compareController',
        templateUrl: 'compare/compare.tpl.html',
            resolve: {
            responseData: function(myService, $route){
                return myService.getData(
                    $route.current.params.comparetype
                );
            }
        }   
    });
}])

此代码用于根据传递的比较类型(“红色小部件”)获取第一个数据集，但我如何调用 myService.getData('Glossary')。我认为这是一个异步的事情，但我仍在学习路线和解决方案。下面是我想要的东西。我知道这是错误的，但我希望它能说明我的预期目的。

.config( ['$routeProvider', function( $routeProvider ){
    $routeProvider.when('/compare/:comparetype', {
        controller: 'compareController',
        templateUrl: 'compare/compare.tpl.html',
            resolve: {
            responseData: function(myService, $route){
                var route = $route.current.params.comparetype;
                var resp = myService.getData(route);
                if (route === 'red widget') {
                    resp.glossary = myService.getData('glossary');
                }
                return resp;
            }
        }   
    });
}])

作为旁注，如果 resp.glossary 在 responseData 中，它最终将被放置在 $rootScope.glossary 中。这部分不是问题。我只需要知道为什么 myService.getData() 没有按我希望的方式工作。

这是我的工厂方法:

.factory('myService', function($http) {
    var myService = {
        getData: function(compare) {
            var promise = $http({
                url: "/data.json",
                method: "GET",
                cache: false,
                params: {
                    compare: compare
                },
                transformResponse: function(response) {
                    // do some stuff...
                    return resp;
                }
            })
            .then(function(response) {
                return response.data;
            });
            return promise;
        }
        return myService;
    }
});

Answer 1

您必须创建自己的 promise 并将其返回给 resolve 函数。当完整数据可用时，您将不得不兑现您创建的 promise 。有点像

resolve: {
            responseData: function(myService, $route,$q){
                var defer=$q.defer();
                var route = $route.current.params.comparetype;
                myService.getData(route).then(function(data){
                      resp=data;
                      if (route === 'red widget') {
                          myService.getData('glossary').then(function(glossary){
                               resp.glossary=glossary;
                               defer.resolve(data);
                          });
                      }

                });
                return defer.promise;
            }

我假设您的 getData 是一个返回 promise 的异步方法。