Question

我在UI路由器中有一个解析对象正常工作;但是我当前的设置会对同一个源进行两次单独的API调用。我不想缓存数据，因为它经常更改，但我希望这两个函数都可以从一个数据api调用中获取。这是我目前的设置。

基本上，一个函数获取所有结果，并且一个函数在结果中循环以创建数组。

resolve: {

            recipeResource: 'RecipeResource',

            getRecipeData: function($stateParams, recipeResource){
                var recipeId = $stateParams.id;
                var getData = function(){
                    var data = recipeResource.get({recipeId: recipeId}).$promise;
                    return data;
                }
                return {
                    recipeId: recipeId,
                    getData: getData

                }

            },

            recipe: function($stateParams, recipeResource, getRecipeData){
                return getRecipeData.getData();
            },
            subCatArray: function($stateParams, recipeResource, getRecipeData){

                var data = getRecipeData.getData().then(function(value){
                    var ingredients = value.data.ingredients;
                    var log = [];
                    angular.forEach(ingredients, function(value, key) {
                      if(value){  
                        if(value.subCategory){
                        log.push(value.subCategory);
                         };
                    };  
                    }, log);
                    return $.unique(log.concat(['']));
                });
                return data;
            }

        }

Answer 1

您可以使用嵌套的resolves。首先获取所有条目，然后在subCatArray解析中使用已解析的数据进行其他过滤。

然后你只会有一个api电话。

请查看下面的演示或此jsfiddle。

angular.module('demoApp', ['ui.router'])
.factory('dummyData', function($q, $timeout) {
    return {
        getAll: function() {
            var deferred = $q.defer(),
                dummyData = ['test1', 'test2', 'test3', 'test4'];
            
            $timeout(function() {
                deferred.resolve(dummyData);
            }, 1000);
            return deferred.promise
        }
    }
})
.config(function($urlRouterProvider, $stateProvider) {
    $urlRouterProvider.otherwise('/');
    
    $stateProvider
    .state('main', {
        url: '/',
        template: '{{all}} {{filtered}}',
        resolve: {
            'allEntries': function(dummyData) {
                return dummyData.getAll().then(function(data) {
                    return data;
                });
            },
           'filteredEntries': function(allEntries, $filter) {
                return $filter('limitTo')(allEntries, 2);
            }
        },
        controller: function($scope, allEntries, filteredEntries) {
            $scope.all = allEntries;
            $scope.filtered = filteredEntries;
        }
    })
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.15/angular-ui-router.js"></script>
<div ng-app="demoApp">
    <div ui-view=""</div>
</div>

Angular解析函数使用相同的api调用

1 个答案: