Question

this可能重复。我正在使用angular构建应用程序。我正在使用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中提供空白ui-view时，它会渲染视图，

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

有人可以建议我是否遗漏了某些东西或做错了什么？

Answer 1

你在解决方案中做错了，下面是更正后的版本

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。

即使具有正确的状态，ui-views也不会被渲染

1 个答案: