重定向状态AngularJS与UI的路由器默认子状态重定向状态AngularJS与UI的路由器默认子

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

我的目标是对页面加载打开一个默认选项卡。 每个标签有子选项卡，我想有一个默认的子选项卡更换标签时打开。

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

$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演示 。

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

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

Answer 1:

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

该解决方案采用来自于与重定向到一个问题，一个漂亮的“注释” .when() https://stackoverflow.com/a/27131114/1679310 ） 和它真的很酷溶液（克里斯·T，但原帖被yahyaKacem）

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

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

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

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

编辑：从@Alec评论添加选项保存浏览器历史记录。

Answer 2:

事实上，即使提出这个解决方案拉迪姆确实做到了工作，我需要记住每个选项卡的子选项卡（状态）。

所以，我发现了另一个解决方案，做同样的事情也记得每一个标签子状态。

我所有需要做的是安装UI的路由器演员 ，并使用深州重定向功能：

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

谢谢！

Answer 3:

随着1.0版本的UI，路由器，它支持一个redirectTo属性。 例如：

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

Answer 4:

由于UI路由器的1.0版本，默认的钩已使用所证实在实施例数据驱动默认子状态中IHookRegistry.onBefore（）引入http://angular-ui.github.io/ui-router/feature-1.0/接口/ 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);
});

Answer 5:

app.config(function($stateProvider,$urlRouterProvider){

    $urlRouterProvider.when("/state","/state/sub-state");

    })

Answer 6:

如果有人来这里关于如何实现状态的简单的重定向和，因为它发生在我身上的答案，不必使用新的路由器的机会...

显然，再次，如果你能，@bblackwo答案是伟大的：

$stateProvider.state('A', {
  redirectTo: 'B',
});

如果你不能再只是手动重定向它：

$stateProvider.state('A', {
  controller: $state => {
    $state.go('B');
  },
});

我希望它能帮助！

文章来源: Redirect a state to default substate with UI-Router in AngularJS