Question

我想从Service函数返回数据并通过routeProvider将其注入控制器，但只有在数据完全加载后才会注入。

app.js：

    .when('/sources', {
        templateUrl: 'views/app/source/inventory.html',
        controller: 'InventoryCtrl',
        pageTitle: 'Data Inventory',
        resolve: {
            orders: function (OrderService) {
                return OrderService.getOrders();
            },
            sources: function (SourceService) {
                return SourceService.getSources();
            }
        }
    })

SourceService：

angular.module('wp.source')
.factory('SourceService', function ($http, $q) {
    return {
        getSources: function () {
            var model = {
                sources: []
            };
            var promises = [];
            return $http.get('datasets/project.json')
                .then(function (data) {
                    if(localStorage['files'] != null) {
                        var files = JSON.parse(localStorage['files']);
                        for (var i = 0; i < files.length; i++) {
                            model.sources.push(files[i]);
                        }
                    }
                    var sources = [];
                    for (var sourceId in data.data.sources) {
                        var source = data.data.sources[sourceId];
                        source.id = sourceId;
                        sources.push(source);
                    }


                    angular.forEach(sources, function (source) {
                        promises.push($http.get('datasets/' + source.filename).then(function (datasource, resolve) {
                            var metadata = datasource.data.metadata;
                            var source = {
                                name: metadata.name,
                                address: metadata.url,
                                frequency: metadata.refresh,
                                type: metadata.type,
                                tags: metadata.tags,
                                size: metadata.size,
                                active: source.active,
                                sourceID: source.id,
                                sourceFile: source.filename
                            };
                            return source;
                        }));
                    });

                    //var finalPromise = sources.reduce(function (promise, source, index, array) {
                    //    return promise.then(function (a) {
                    //        var query = $http.get('datasets/' + source.filename)
                    //            .then(function (datasource) {
                    //                var metadata = datasource.data.metadata;
                    //                model.sources.push({
                    //                    name: metadata.name,
                    //                    address: metadata.url,
                    //                    frequency: metadata.refresh,
                    //                    type: metadata.type,
                    //                    tags: metadata.tags,
                    //                    size: metadata.size,
                    //                    active: source.active,
                    //                    sourceID: source.id,
                    //                    sourceFile: source.filename
                    //                });
                    //            });
                    //    });
                    //}, $q.when([]));
                    //
                    //finalPromise.finally(function () {
                    //    return model;
                    //})
                    $q.all(function () {
                        return model;
                    });
                });

        }
    }
});

控制器：

angular.module('wp.source')
.controller('InventoryCtrl', function ($scope, orders, sources) {
    $scope.orders = orders.data;

    $scope.gridView = true;
    $scope.rowView = false;

    $scope.allSources = sources.sources;
    $scope.shownSources = $scope.allSources;
...

目前我遇到的问题是在“model”完全加载之前注入了值。我试图将子查询打包成$ q.all的承诺，但我不确切地知道去哪里

任何帮助将不胜感激

Answer 1

您想使用$ q.defer（）并返回延迟的promise对象。您的代码看起来像这样。

angular.module('wp.source')
.factory('SourceService', function ($http, $q) {
    return {
        getSources: function () {
            var model = {
                sources: []
            };
            var deffered = $q.defer();
            var promises = [];
            return $http.get('datasets/project.json')
                .then(function (data) {
                    if(localStorage['files'] != null) {
                        var files = JSON.parse(localStorage['files']);
                        for (var i = 0; i < files.length; i++) {
                            model.sources.push(files[i]);
                        }
                    }
                    var sources = [];
                    for (var sourceId in data.data.sources) {
                        var source = data.data.sources[sourceId];
                        source.id = sourceId;
                        sources.push(source);
                    }


                    angular.forEach(sources, function (source) {
                        promises.push($http.get('datasets/' + source.filename).then(function (datasource, resolve) {
                            var metadata = datasource.data.metadata;
                            var source = {
                                name: metadata.name,
                                address: metadata.url,
                                frequency: metadata.refresh,
                                type: metadata.type,
                                tags: metadata.tags,
                                size: metadata.size,
                                active: source.active,
                                sourceID: source.id,
                                sourceFile: source.filename
                            };
                            return source;
                        }));
                    });

                    //var finalPromise = sources.reduce(function (promise, source, index, array) {
                    //    return promise.then(function (a) {
                    //        var query = $http.get('datasets/' + source.filename)
                    //            .then(function (datasource) {
                    //                var metadata = datasource.data.metadata;
                    //                model.sources.push({
                    //                    name: metadata.name,
                    //                    address: metadata.url,
                    //                    frequency: metadata.refresh,
                    //                    type: metadata.type,
                    //                    tags: metadata.tags,
                    //                    size: metadata.size,
                    //                    active: source.active,
                    //                    sourceID: source.id,
                    //                    sourceFile: source.filename
                    //                });
                    //            });
                    //    });
                    //}, $q.when([]));
                    //
                    //finalPromise.finally(function () {
                    //    return model;
                    //})
                    $q.all(promises).then(function () {
                        deferred.resolve(model);
                    });
                });
        }
          return deferred.promise();
    }
});

编辑正如其他人提到的那样，您需要将您的承诺数组传递到$ q.all才能使其正常工作。另外值得注意的是，$ q.all将按照它们在promise数组中的顺序返回一个数组，其中包含每个promise的结果。

Here's a plunker demoing the use of defer

Angular's Docs中有更多$ q.defer和$ q.all。

Answer 2

您需要将$q.all与promises数组一起使用，并从外部promise中返回：

angular.module('wp.source')
.factory('SourceService', function($http, $q) {
    return {
        getSources: function() {
            var model = {
                sources: []
            };
            return $http.get('datasets/project.json').then(function(data) {

                if (localStorage['files'] != null) {
                    var files = JSON.parse(localStorage['files']);
                    for (var i = 0; i < files.length; i++) {
                        model.sources.push(files[i]);
                    }
                }

                var sources = [],
                    promises = [];

                for (var sourceId in data.data.sources) {
                    var source = data.data.sources[sourceId];
                    source.id = sourceId;
                    sources.push(source);
                }

                var promises = sources.map(function(source) {
                    return $http.get('datasets/' + source.filename).then(function(datasource, resolve) {
                        var metadata = datasource.data.metadata;
                        model.sources.push({
                            name: metadata.name,
                            address: metadata.url,
                            frequency: metadata.refresh,
                            type: metadata.type,
                            tags: metadata.tags,
                            size: metadata.size,
                            active: source.active,
                            sourceID: source.id,
                            sourceFile: source.filename
                        });
                    });    
                });

                return $q.all(promises).then(function() {
                    return model;
                });
            });

        }
    }
});

Answer 3

您没有正确使用$q.all。对代码的最简单修复方法是更改

$q.all(function () {
    return model;
});

到

$q.all(promises).then(function() {
    return model;
});

你基本上没有＆＃34;告诉＆＃34;承诺需要汇总的$q.all。请参阅documentation for $q并查看all的工作原理。

Angular：只有在满足几个承诺后才返回数据

3 个答案: