Leere Vorlagen ausblenden, bis die Daten mit Restangular und UI-Router geladen werden

Question

Ich verwende ocLazyLoad zur Abhängigkeitsinjektion und Laden von CSS & JS on-demand. Ich würde UI-Router state nicht ändern, bis die Daten geladen worden sind. Auch verwende ich Restangular, um API zu verbinden.

Nun, wie Restangular-Funktion von Auflösungsstatus aufgerufen wird? Es ist mein Weg:

.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() 
    } 
}) 

und meine UserListCtrl ist:

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; 
     }); 
    } 
}) 

und meine UserService ist:

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

Sie können keine Funktion von der Steuerung an Konfigurations Komponenten aufrufen. Für das Warten der Backend-Antwort auf das Öffnen der Seite sollten Sie die Auflösungsfunktion von ui-router verwenden.

Sie definiert bereits resolvedItems so Ihre Anfrage machen es userlist in und Antwort wie dieses Problem zu beheben ...

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; 
      }) 
     }] 
} 

und danach sollten Sie resolvedItems auf Sie injizieren Controller dann Seite nicht angezeigt, bis Ihre Anfrage ist abgeschlossen ...