@H_403_3@
我正在测试UI-Router嵌套状态,但是我无法在父/子场景中设置默认状态,请帮忙.
库：
>角1.3.15
> ui路由器：0.2.15
导航路径：
/ - home /settings - parent state/page /settings.default - child 1 /settings.mail - child 2 /settings.phone - child 3
预期行为：
导航到/ settings时,应触发/加载默认子级“常规”状态/页面
实际行为：
如果我将’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>
解决方法
有
a working plunker
这可行,但只需使用网址导航,即href：
<a href="/settings"> // will work
但这不会 – 我们不能去抽象状态：
<a ui-sref="settings">settings</a>
但基于这个Q& A：
Redirect a state to default substate with UI-Router in AngularJS
我们可以删除抽象并创建这样的默认状态处理.有updated plunker
// redirection engine
app.run(['$rootScope','$state',function($rootScope,$state) {
$rootScope.$on('$stateChangeStart',function(evt,to,params) {
if (to.redirectTo) {
evt.preventDefault();
$state.go(to.redirectTo,params)
}
});
}]);
父级统计调整：
.state('settings',{
//abstract: true,redirectTo: 'settings.general',...
检查它here
@H_403_3@
