在AngularJS中使用UI-Router将状态redirect到默认子状态

我正在创build一个基于标签的页面,显示一些数据。 我在AngularJs中使用UI-Router来注册状态。

我的目标是在页面加载时打开一个默认选项卡。 每个选项卡都有子选项卡,我希望在更改选项卡时打开一个默认的子选项卡。

我正在testing与onEnter函数和内部我使用$state.go('mainstate.substate'); 但似乎不工作,由于循环效应问题(在state.go子状态,它调用其父状态,等等,它会变成一个循环)。

 $stateProvider .state('main', { url: '/main', templateUrl: 'main.html', onEnter: function($state) { $state.go('main.street'); } }) .state('main.street', { url: '/street', templateUrl: 'submenu.html', params: {tabName: 'street'} }) 

在这里,我创build了一个plunker演示 。

现在一切正常,除了我没有默认选项卡打开,这正是我所需要的。

感谢您的build议,意见和想法。

我在这里创build了一个例子 。

这个解决scheme来自一个很好的“评论”,使用.when() .when() https://stackoverflow.com/a/27131114/1679310非常酷的解决scheme(由克里斯T,但原来的职位是由yahyaKacem)

https://github.com/angular-ui/ui-router/issues/1584#issuecomment-75137373

所以首先我们用redirect设置来扩展main:

 $stateProvider .state('main', { url: '/main', templateUrl: 'main.html', redirectTo: 'main.street', }) 

并只添加这几行到运行

 app.run(['$rootScope', '$state', function($rootScope, $state) { $rootScope.$on('$stateChangeStart', function(evt, to, params) { if (to.redirectTo) { evt.preventDefault(); $state.go(to.redirectTo, params, {location: 'replace'}) } }); }]); 

这样我们可以用默认的redirect来调整我们的任何状态… 在这里检查

编辑:添加选项从@Alec评论保存浏览器的历史。

实际上,即使Radim提出的解决scheme完成了这项工作,我也需要记住每个选项卡的子选项卡(状态)。

所以我find了另外一个解决scheme,但是也记得每个标签子状态。

我所要做的就是安装ui-router-extras并使用深层状态redirectfunction:

 $stateProvider .state('main.street', { url: '/main/street', templateUrl: 'main.html', deepStateRedirect: { default: { state: 'main.street.cloud' } }, }); 

谢谢!

从ui-router 1.0版本开始,已经使用IHookRegistry.onBefore()引入了一个默认钩子,如http://angular-ui.github.io/ui-router/feature-1.0/中的示例;Data Driven Default Substate所示 接口/ transition.ihookregistry.html#onbefore

 // state declaration { name: 'home', template: '<div ui-view/>', defaultSubstate: 'home.dashboard' } var criteria = { to: function(state) { return state.defaultSubstate != null; } } $transitions.onBefore(criteria, function($transition$, $state) { return $state.target($transition$.to().defaultSubstate); }); 

从UI 版本1.0开始 ,它支持redirectTo属性。 例如:

 .state('A', { redirectTo: 'AB' })