Question

我在我的应用程序中得到了几个观点。 由于从后端服务器获取数据，我希望用户可以毫不拖延地在这些视图之间切换。 所需数据在$ routeProvider中定义。 如何以优雅的方式提供在角度加载后从服务器获取数据的解决方案并保持此数据可用于$ routeProvider？

我的想法不起作用，因为：

我可以将代码放在某个主控制器中但 $ scope在$ routeProvider中不可用;
我可以将代码提取到某些Factory类中，如下所示：

APP.factory('DataFactory', function($q,KAS){
return {
    data:new Array(),
    fetchData:function(){
        var albums=$q.defer();
        var artists=$q.defer();
        var genres=$q.defer();

        albums.resolve(KAS.api({action:'get_albums'}));
        artists.resolve(KAS.api({action:'get_artists'}));
        genres.resolve(KAS.api({action:'get_genres'}));

        var data=$q.all([albums.promise, artists.promise, genres.promise]);
        data.then(function(retv){
            angular.forEach(retv, function(value, key){
                data[key]=(value.data.response);
            });
        });
    },
    getData:function(){
        return data;
    }
}
});

但getData函数无法访问数据数组 - 我无法引用数据属性。实际上它很明显，因为我返回了一系列函数/对象。但我把它贴在上面是为了理解我想要做的事情。

如何以优雅的方式提供在角度加载后从服务器获取数据的解决方案并保持此数据可用于$ routeProvider？

Answer 1

您正在创建变量（var data），而不是分配给对象的属性。 JavaScript认为您正在使用名为data的变量，但实际上您正在引用要返回的对象的属性数据。

APP.factory('DataFactory', function($q,KAS){
    var myFactory = {
        data:new Array(),
        fetchData:function(){
            var albums=$q.defer();
            var artists=$q.defer();
            var genres=$q.defer();

            albums.resolve(KAS.api({action:'get_albums'}));
            artists.resolve(KAS.api({action:'get_artists'}));
            genres.resolve(KAS.api({action:'get_genres'}));

            myFactory.data = $q.all([albums.promise, artists.promise, genres.promise]);
            myFactory.data.then(function(retv){
                angular.forEach(retv, function(value, key){
                    this.data[key]=(value.data.response);
                });
            });
        },
        getData:function(){
            return myFactory.data;
        }
    };
    return myFactory;
});

angularjs首先获取应用数据

1 个答案: