我测试 UI-路由器
嵌套的状态,但我不能设置父/子方案的默认状态,请帮助。
库:
角1.3.15 UI路由器:0.2.15导航路径:
/ - 家/设置 - 状态父/页/settings.default - 孩子1/settings.mail - 2儿童/settings.phone - 孩子3
预期的行为:
导航到 /设置
在,默认的孩子一般状态/页应该触发/加载
实际行为:
如果我设置设置国家abstrat:真正的',就会出现错误:
错误:无法过渡到抽象状态设置 在Object.transitionTo(角-UI-router.js:3143) 在Object.go(角-UI-router.js:3068) 在角-UI-router.js:4181 在angular.js:16299 在completeOutstandingRequest(angular.js:4924) 在angular.js:5312
如果我删除'abstrat:真正的',有没有错误,但是当我浏览到/设置,默认状态子/页 - 一般情况不会触发,settings.html显示,但没有加载
app.js:
angular.module('测试',['ui.router','sails.io'])//配置路由的.config(['$ stateProvider','$ urlRouterProvider','$ locationProvider', 功能($ stateProvider,$ urlRouterProvider,$ locationProvider){ $ urlRouterProvider.otherwise('/'); $ locationProvider.html5Mode(真); $ stateProvider .STATE('家',{ 网址:'/', templateUrl:意见/ index.html的, 控制器:'IndexController中 }) .STATE(设置,{ 摘要:真实, 网址:/设置 templateUrl:意见/ settings.html', 控制器:'SettingsController }) .STATE('settings.general',{ 网址:'', templateUrl:查看/设置/ general.html', 控制器:'SettingsController }) .STATE('settings.mail',{ 网址:'/邮件, templateUrl:查看/设置/ mail.html', 控制器:'SettingsController }) .STATE('settings.phone',{ 网址:'/电话', templateUrl:查看/设置/ phone.html', 控制器:'SettingsController });}]);
的意见/ settings.html
< DIV CLASS =容器> < DIV CLASS =行> < DIV CLASS =COL-MD-3> < UL类=列表组> <李班=列表组项><一个UI的SREF =一般。>常规< / A>< /李> <李班=列表组项><一个UI的SREF =手机。>电话和LT; / A>< /李> <李班=列表组项><一个UI的SREF =邮件。>邮件和LT; / A>< /李> < / UL> < / DIV> < DIV CLASS =COL-MD-9> <格UI的视图>< / DIV> < / DIV> < / DIV>< / DIV>
解决方案
有一个工作plunker
这会工作,但只是网址
导航,即 的href
:
< A HREF =/设置> // 将工作
但是这不会 - 我们不能去为 摘要
状态:
<一个UI的SREF =设置>设置< / A>
不过,在此基础上Q&放大器;答:
我们可以删除抽象并创建默认状态处理这个样子。有更新plunker
//重定向引擎app.run(['$ rootScope','$州',函数($ rootScope,$州){ $ rootScope。在$('$ stateChangeStart',函数(EVT到,则params){ 如果(to.redirectTo){ 。EVT preventDefault(); $ state.go(to.redirectTo,则params) } });}]);
母公司统计调整:
.STATE('设置',{ //摘要:真实, redirectTo:settings.general', 网址:/设置 ...
检查一下这里
I'm testing UI-Router
nested state, but I'm not able to set default state in parent/child scenario, please help.
libraries:
angular 1.3.15 ui router: 0.2.15navigation path:
/ - home
/settings - parent state/page
/settings.default - child 1
/settings.mail - child 2
/settings.phone - child 3
expected behavior:
when navigating to /settings
, the default child 'general' state/page should be triggered/loaded
actual behavior:
If I set 'settings' state 'abstrat: true', there will be error:
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
If I remove 'abstrat: true', there's no error, but when i navigate to /settings, default child state/page - general state not triggered, settings.html displayed but not loaded
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'
});
}]);
views/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>
解决方案
There is a working plunker
This would work, but just with url
navigation, i.e. href
:
<a href="/settings"> // will work
But this will not - we cannot go to abstract
state:
<a ui-sref="settings">settings</a>
But based on this Q & A:
We can remove abstract and create default state handling like this. There is 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)
}
});
}]);
The parent stat adjustment:
.state('settings', {
//abstract: true,
redirectTo: 'settings.general',
url: '/settings',
...
Check it here