嵌套角度routeProvider解析

时间:2014-04-10 14:59:24

标签: javascript angularjs angular-routing

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

"红色小工具","蓝色小工具","词汇表"

我需要在第一次选择此路线时调用词汇表,这也将始终调用红色窗口小部件的数据。

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

此代码用于根据传递的comparetype(" red Widgets")获取第一个数据集,但我如何调用myService.getData(' Glossary')。我认为这是一个asycn的事情,但我仍在学习路线和决心。以下是我想要的东西。我明白这是错误的,但我希望它符合我的预期目的。

.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最终将放在$ rootScope.glossary中,如果它在responseData中。这部分不是问题所在。我只需要知道为什么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;
    }
});

1 个答案:

答案 0 :(得分:2)

您必须创建自己的承诺并将其返回给resolve函数。他们必须解决您在完整数据可用时创建的承诺。像

这样的东西
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的异步方法。