データがRestrictionとUI-Routerでロードされるまで空のテンプレートを隠す

Question

私はocLazyLoadを依存関係注入に使用し、CSS &をオンデマンドでロードします。私はデータがロードされるまで、UI-Router stateを変更しません。また、私はAPIを接続するためにRestangularを使用します。

解決状態からRestangular関数を呼び出す方法は？それは私のルートです：

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は次のとおりです：

.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がある

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の解決機能を使用する必要があります。

あなたはまだあなたの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を定義し、それの後にあなたがあなたの要求があるまで、ページは表示されませんコントローラあなたにresolvedItemsを注入しなければなりません完了しました...