重定向状态AngularJS与UI的路由器默认子状态 [英] Redirect a state to default substate with UI-Router in AngularJS

问题描述

我创建一个标签基于页面，显示一些数据。
我使用的UI AngularJs，路由器寄存器状态。

I'm creating a tab based page which shows some data. I'm using UI-Router in AngularJs to register states.

我的目的是让在页面加载打开一个默认选项卡。每个选项卡具有子选项卡，我想有一个默认的子选项卡的标签变化时打开。

My aim is to have one default tab open on page load. Each tab have sub tabs, and I would like to have a default sub tab open when changing tabs.

我是用的OnEnter 功能测试和里面我使用 $ state.go（'mainstate.substate'）; ，但它似乎没有工作，由于循环效应问题（上state.go到SUBSTATE它调用它的父状态等等，它变成了一个循环）。

I was testing with onEnter function and inside I'm using $state.go('mainstate.substate'); but it seems not to work due to loop effect issues (on state.go to substate it calls its parent state and so on, and it turns in a loop).

$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'}
})

在这里，我创建了一个 plunker演示。

目前一切正常，只是我没有默认选项卡打开，这正是我需要的。

For now everything works, except that I don't have default tab open and that's exactly what I need.

感谢您的建议，意见和想法。

Thank you for your suggestions, opinions and ideas.

推荐答案

我创建一个例子。

该解决方案来自使用。当（）的（<一个一个的重新定向的问题，一个漂亮的注释 href=\"http://stackoverflow.com/a/27131114/1679310\">http://stackoverflow.com/a/27131114/1679310)并为它的 很酷溶液（克里斯·T，但原帖由yahyaKacem）的

This solution comes from a nice "Comment" to an an issue with redirection using .when() (http://stackoverflow.com/a/27131114/1679310) and really cool solution for it (by Chris T, but the original post was by yahyaKacem)

<一个href=\"https://github.com/angular-ui/ui-router/issues/1584#issuecomment-75137373\">https://github.com/angular-ui/ui-router/issues/1584#issuecomment-75137373

所以，首先让我们来延长主机与重定向设置：

So firstly let's extend main with redirection setting:

$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)
      }
    });
}]);

这样我们就可以调整我们的任何状态，其默认重定向...检查它这里

这篇关于重定向状态AngularJS与UI的路由器默认子状态的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！