隐藏空模板，直到使用 Restangular 和 UI-Router 加载数据

Question

我使用 ocLazyLoad 进行依赖注入并按需加载 CSS & JS。在加载数据之前，我不会更改 UI-Router state。我还使用 Restangular 连接 API。

现在如何从解析状态调用Restangular函数？这是我的路线：

.state('admin.users',{
    url: "/users",
    templateUrl: "user/views/users.html",
    controller:'UserListCtrl',
    resolve: {
        dep: ['$ocLazyLoad',
            function( $ocLazyLoad ){
                return $ocLazyLoad.load(['UserService.js']).then(
                    function(){
                        return $ocLazyLoad.load(['UserListCtrl.js']);
                    }
                );
            }],
       resolvedItems: userlist()
    }
})

我的 UserListCtrl 是：

app.controller('UserListCtrl',function($scope,UserService){  

    /*
     * Get all users
     */
    userlist = function(){
        UserService.list().then(function(data){
             $scope.users = data;
             $scope.pagination = $scope.users.metadata;
             $scope.maxSize = 5;
        });
    }
})

我的 UserService 是：

angular.module('app').service('UserService', function($rootScope, Restangular) {
    /*
     * Build collection /user
     */
    var _userService = Restangular.all('user');


    /*
     * Get list of users
     */
    this.list = function() {
        // GET /api/user
        return _userService.getList();
    };
})

Answer 1

您不能在配置组件中从控制器调用函数。要等待页面打开的后端响应，您应该使用 ui-router.

的解析功能

您已经定义了 resolvedItems，因此请在其中提出您的 userList 请求并像这样解析响应...

resolve: {
    dep: ['$ocLazyLoad',
        function( $ocLazyLoad ){
            return $ocLazyLoad.load(['UserService.js']).then(
                function(){
                    return $ocLazyLoad.load(['UserListCtrl.js']);
                }
            );
        }],
   resolvedItems: ['UserService', function(UserService){
            return UserService.list().then(function(response){
                return response;
            })
        }]
}

然后你应该在你的控制器上注入 resolvedItems 然后页面将不会显示直到你的请求完成...

隐藏空模板，直到使用 Restangular 和 UI-Router 加载数据

Hiding empty templates until the data is loaded with Restangular and UI-Router

javascript

angularjs

angular-ui-router

restangular

oclazyload