我正在测试UI-Router
嵌套状态,但我无法在父/子场景中设置默认状态,请帮助。
图书馆:
导航路径:
/ - home
/settings - parent state/page
/settings.default - child 1
/settings.mail - child 2
/settings.phone - child 3
预期行为:
当导航到/settings
,应该触发/加载默认的子“常规”状态/页面
实际行为:
如果我将“设置”状态设置为“abstrat:true”,则会出现错误:
Error: Cannot transition to abstract state 'settings'
at Object.transitionTo (angular-ui-router.js:3143)
at Object.go (angular-ui-router.js:3068)
at angular-ui-router.js:4181
at angular.js:16299
at completeOutstandingRequest (angular.js:4924)
at angular.js:5312
如果我删除“abstrat:true”,则不会出现错误,但是当我导航到/settings时,默认子状态/页面 - 未触发一般状态,settings.html显示但未加载
app.js:
angular.module('test',['ui.router','sails.io']) //config routing
.config(['$stateProvider','$urlRouterProvider','$locationProvider',
function($stateProvider,$urlRouterProvider,$locationProvider) {
$urlRouterProvider.otherwise('/');
$locationProvider.html5Mode(true);
$stateProvider
.state('home', {
url: '/',
templateUrl: 'views/index.html',
controller: 'IndexController'
})
.state('settings', {
abstract: true,
url: '/settings',
templateUrl: 'views/settings.html',
controller: 'SettingsController'
})
.state('settings.general', {
url: '',
templateUrl: 'views/settings/general.html',
controller: 'SettingsController'
})
.state('settings.mail', {
url: '/mail',
templateUrl: 'views/settings/mail.html',
controller: 'SettingsController'
})
.state('settings.phone', {
url: '/phone',
templateUrl: 'views/settings/phone.html',
controller: 'SettingsController'
});
}]);
视图/settings.html
<div class="container">
<div class="row">
<div class="col-md-3">
<ul class="list-group">
<li class="list-group-item"><a ui-sref=".general">General</a></li>
<li class="list-group-item"><a ui-sref=".phone">Phone</a></li>
<li class="list-group-item"><a ui-sref=".mail">Mail</a></li>
</ul>
</div>
<div class="col-md-9">
<div ui-view></div>
</div>
</div>
</div>