ui-即使状态正确,视图也不会被渲染
ui-views are not getting rendered even with correct states
可能与 this 重复。我正在使用 angular 创建一个应用程序 ui。我正在使用 ui 路由器来渲染多个视图。我的问题是当我启动应用程序时,视图没有得到 rendered.My 路由器是,
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;
}
}
});
任何人都可以建议我是否遗漏了什么或做错了什么?
你在解决部分做错了,下面是更正后的版本
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;
}
}
在对应的controller中注入users
可能与 this 重复。我正在使用 angular 创建一个应用程序 ui。我正在使用 ui 路由器来渲染多个视图。我的问题是当我启动应用程序时,视图没有得到 rendered.My 路由器是,
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;
}
}
});
任何人都可以建议我是否遗漏了什么或做错了什么?
你在解决部分做错了,下面是更正后的版本
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;
}
}
在对应的controller中注入users