即使使用正确的状态,UI视图也不会呈现

问题描述:

可能的副本this。我正在使用角度来构建应用程序。我使用ui路由器来渲染多个视图。我的问题是,当我启动应用程序,意见没有得到rendered.My路由器,即使使用正确的状态,UI视图也不会呈现

app.config(['$stateProvider', '$urlRouterProvider', 
    function($stateProvider, $urlRouterProvider) { 
    //$urlRouterProvider.otherwise('/'); 
     $stateProvider 
      .state('home', { 
       url: '/home', 
       views: {   
        'indexlist': {  
         templateUrl: 'partials/list', 
         controller:'ListController', 
         controllerAs:'ctrl',  
         resolve: { 
          users: function ($q, ListService) { 
           console.log('Load all indexlist'); 
           var deferred = $q.defer(); 
           ListService.loadAllUsers().then(deferred.resolve, deferred.resolve); 
           return deferred.promise; 
          } 
         } 
        },  
       'sidemenu': {  
        templateUrl: 'partials/sidemenu', 
        controller:'HomeController', 
        controllerAs:'ctrl',  
        resolve: { 
         users: function ($q, HomeService) { 
          console.log('Load all values'); 
          var deferred = $q.defer(); 
          HomeService.loadAllLists().then(deferred.resolve, deferred.resolve); 
          return deferred.promise; 
         } 
        } 
       }  
       } 
      }); 

和index.html是,

<!DOCTYPE html> 

<html lang="en" ng-app="myApp"> 
    <head> 
     <title>${title}</title> 
     <link href="css/bootstrap.css" rel="stylesheet"/> 
     <link href="css/app.css" rel="stylesheet"/> 
     <link href="css/sidebar.css" rel="stylesheet"/> 
     <script src="js/lib/jquery-3.2.1.min.js"></script> 
     <script src="js/lib/bootstrap.min.js"></script> 
     <script src="js/lib/angular.min.js" ></script> 
     <script src="js/lib/angular-ui-router.min.js" ></script> 
     <script src="js/lib/localforage.min.js" ></script> 
     <script src="js/lib/ngStorage.min.js"></script> 
     <script src="js/app/app.js"></script> 
     <script src="js/app/ListService.js"></script> 
     <script src="js/app/ListController.js"></script> 
     <script src="js/app/HomeService.js"></script> 
     <script src="js/app/HomeController.js"></script> 
    </head> 
    <body> 

     <div ui-view="sidemenu"></div> 
     <div ui-view="indexlist"></div> 
    </body> 
</html> 

但是,当我不使用多个视图等,并提供空白的用户界面视图中的index.html,它呈现的观点,

$stateProvider 
      .state('home', { 
       url: '/home', 
       templateUrl: 'partials/sidemenu', 
       controller:'HomeController', 
       controllerAs:'ctrl', 
       resolve: { 
        users: function ($q, ListService) { 
         console.log('Load all lists'); 
         var deferred = $q.defer(); 
         ListService.loadAllUsers().then(deferred.resolve, deferred.resolve); 
         return deferred.promise; 
        } 
       } 
      }); 

任何人都可以提出,如果我失去了一些东西或者做错了什么?

你做错了在解决部分,下面是修正版本

resolve: { 
      users: function ($q, ListService) { 
        console.log('Load all lists'); 
        var deferred = $q.defer(); 
        ListService.loadAllUsers().then(function(response){ 
         deferred.resolve(true) 
        }); 
       return deferred.promise; 
      } 
    } 

进样users在相应的控制器。

+0

更正了它..但是这并没有解决我的问题。 –

+0

您需要对indexList和Sidemenu都一样,并给indexList @ home –

+0

删除解析部分并将其添加到控制器中。这解决了我的问题。谢谢。 –