Question

我仍然遇到模板和指令丢失的问题，因为他们在实际设置数据之前尝试$compile d。这是因为API响应需要时间才能恢复。

因此，我正在尝试将我的API调用转换为在我的路由的resolve属性中工作，但是我无法弄清楚如何正确地执行它。这就是我所拥有的：

我的州提供商解析财产

 $stateProvider
            .state('dashboard', {
                url: '/',
                controller: 'LandingController',
                resolve: {
                    data: ['API', function(API){
                        return API.Backups.getAll(function (data) {


                            return data.result;


                        });
                    }]
                }
            })

我的控制器

app.controller('LandingController', ['$scope', 'API', function ($scope, API, data) {

        $scope.data = data;
......

我正在使用提供$resource的Angular服务来获取API数据，但是由于控制器中的data参数仍未定义，因此无法正常工作。

Answer 1

我想出了我需要的东西。我只需要返回$resource.$promise而不是$resource。在这之后，一切都很好！

<强>解决方案

$stateProvider
            .state('dashboard', {
                url: '/',
                controller: 'LandingController',
                resolve: {
                    res: ['API', function(API){
                        return API.Backups.getAll(function (data) {
                            return data.result;
                        }).$promise;
                    }]
                }
            })

Answer 2

如果没有API.Backups.getAll()的代码，我无法说明，但resolve函数需要返回＆＃34;承诺＆＃34;这可以由Angular $q提供：

resolve: ['$q', 'API', function($q, API) {

    // 1. $q provides the deferred which satisfies the "promise" API
    var deferred = $q.defer();

    // 2. call your API
    API.Backups.getAll(function (data) {
        // 4. resolve the promise with data that was returned
        deferred.resolve(data.result);
    });

    // 3. return the promise
    return deferred.promise;
}]

编号的评论显示订单会发生。在承诺resolve()）上调用deferred之前，Angular不会实例化您的控制器。

请参阅：https://docs.angularjs.org/api/ng/service/ $ q

使用AngularJS Resolve在呈现DOM之前获取API数据

2 个答案: