当用户使用UI-Router转换到其父状态时，将用户引导到子状态

考虑以下：

.state('manager.staffList', {url:'^/staff?alpha', templateUrl: 'views/staff.list.html', data:{activeMenu: 'staff'}, controller: 'staffListCtrl'}) .state('manager.staffDetail', {url:'^/staff/{id}' , templateUrl: 'views/staff.html', data:{activeMenu: 'staff'}, controller: 'staffDetailsCtrl'}) .state('manager.staffDetail.view', {url:'/view', templateUrl: 'views/staff.details.html', data:{activeMenu: 'staff'}}) .state('manager.staffDetail.view.schedule', {url:'/schedule', templateUrl:'views/staff.view.schedule.html', data:{activeMenu: 'staff'}}) .state('manager.staffDetail.view.history', {url:'/history' , templateUrl:'views/staff.view.history.html', data:{activeMenu: 'staff'}}) .state('manager.staffDetail.view.log', {url:'/log', templateUrl:'views/staff.view.log.html', data:{activeMenu: 'staff'}}) .state('manager.staffDetail.view.files', {url:'/files', templateUrl:'views/staff.view.files.html', data:{activeMenu: 'staff'}}) .state('manager.staffDetail.edit', {url:'/edit', templateUrl: 'views/staff.edit.html', data:{activeMenu: 'staff'}}) 

如果我去了domain.com/staff/1234/view ，我该如何默认到manager.staffDetail.view.schedule子状态？

Answer 1

1. 首先，将一个属性添加到'manager.staffDetail.view'状态的abstract:true 。 这不是必需的，但是你想设置这个，因为你不会直接进入这个状态，你总是会去其中一个子状态。

2. 然后执行以下任一操作：

   • 给'manager.staffDetail.view.schedule'一个空的URL 。 这将使它匹配与父状态url相同的url，因为它没有附加到父url。

     .state('manager.staffDetail.view.schedule', {url:'', ...

   • 或者，如果你想保持默认子路由的url不变，那么在你的module.config中设置一个redirect 。 此处的代码会将'/staff/{id}/view'任何位置redirect到'/staff/{id}/view/schedule' ：

     $urlRouterProvider.when('/staff/{id}/view', '/staff/{id}/view/schedule');

Answer 2

为了设置默认的子视图，请检查这个例子 。 点击Route 1加载默认状态route1.list

 // For any unmatched url, send to /route1 $stateProvider .state('route1', { url: "/route1", abstract:true , templateUrl: "route1.html" }) .state('route1.list', { url: '', templateUrl: "route1.list.html", controller: function($scope){ $scope.items = ["A", "List", "Of", "Items"]; } }) .state('route1.desc', { url: "/desc", templateUrl: "route1.desc.html", controller: function($scope){ $scope.items = []; } }) .state('route2', { url: "/route2", templateUrl: "route2.html" }) .state('route2.list', { url: "/list", templateUrl: "route2.list.html", controller: function($scope){ $scope.things = ["A", "Set", "Of", "Things"]; } }) 

Answer 3

我遇到了同样的问题，发现这个解决scheme的工作：

https://github.com/angular-ui/ui-router/issues/948#issuecomment-75342784

这是从github上的@christopherthielen引用的

“现在，不要宣布你的状态摘要，并使用这个配方：”

  app.run($rootScope, $state) { $rootScope.$on('$stateChangeStart', function(evt, to, params) { if (to.redirectTo) { evt.preventDefault(); $state.go(to.redirectTo, params) } }); } $stateProvider.state('parent' , { url: "/parent", templateUrl: "parent.html", redirectTo: 'parent.child' }); $stateProvider.state('parent.child' , { url: "/child", templateUrl: "child.html" }); 

这是过程如何工作的细分：

1. 用户导航到状态“父”
2. “$ stateChangeStart”事件被激发
3. “$ stateChangeStart”的监听器捕获事件并将“toState”（即“parent”）和“event”传递给处理函数
4. 处理函数检查“toState”上是否设置了“redirectTo”。
5. 如果“redirectTo”未设置，则不会发生任何事情，用户将继续进入“toState”状态。
6. 如果设置“redirectTo”，事件将被取消（event.preventDefault），$ state.go（toState.redirectTo）会将它们发送到“redirectTo”（即“parent.child”）中指定的状态。
7. “$ stateChangeStart”事件再次被触发，但是这次“toState”==“parent.child”和“redirectTo”选项没有设置，所以它继续“toState”。

Answer 4

很晚，但我认为你可以“redirect”到你想要的状态。

 .state('manager.staffDetail.view', { url:'/view', templateUrl: 'views/staff.details.html', controller: 'YourController' }) app.controller('YourController', ['$state', function($state) { $state.go('manager.staffDetail.view.schedule'); }]); 

你可以在状态configuration中简单地写你的控制器。

Answer 5

我将“manager.staffDetial.view”更改为抽象状态，并将缺省子状态的URL保留为空白。

 // Staff .state('manager.staffList', {url:'^/staff?alpha', templateUrl: 'views/staff.list.html', data:{activeMenu: 'staff'}, controller: 'staffListCtrl'}) .state('manager.staffDetail', {url:'^/staff/{id}', templateUrl: 'views/staff.html', data:{activeMenu: 'staff'}, controller: 'staffDetailsCtrl'}) .state('manager.staffDetail.view', {url:'/view', abstract: true, templateUrl: 'views/staff.details.html', data:{activeMenu: 'staff'}}) .state('manager.staffDetail.view.schedule', {url:'', templateUrl:'views/staff.view.schedule.html', data:{activeMenu: 'staff'}}) .state('manager.staffDetail.view.history', {url:'/history', templateUrl:'views/staff.view.history.html', data:{activeMenu: 'staff'}}) .state('manager.staffDetail.view.log', {url:'/log', templateUrl:'views/staff.view.log.html', data:{activeMenu: 'staff'}}) .state('manager.staffDetail.view.files', {url:'/files', templateUrl:'views/staff.view.files.html', data:{activeMenu: 'staff'}}) .state('manager.staffDetail.edit', {url:'/edit', templateUrl: 'views/staff.edit.html', data:{activeMenu: 'staff'}}) 

Answer 6

在“angular-ui-router”：“0.2.13”，我不认为@ nfiniteloop的redirect解决scheme将工作。 它曾经回滚到0.2.12（也许不得不把$ urlRouterProvider.when调用在$ stateProvider之前）吗？

请参阅https://stackoverflow.com/a/26285671/1098564

和https://stackoverflow.com/a/27131114/1098564的解决方法（如果你不想回到0.2.12）;

截至2014年11月28日， https://github.com/angular-ui/ui-router/issues/1584表示应该在0.2.14

Answer 7

这里是一个非常简单和透明的替代方法，只需修改ui路由器中的父状态：

  .state('parent_state', { url: '/something/:param1/:param2', templateUrl: 'partials/something/parent_view.html', // <- important controller: function($state, $stateParams){ var params = angular.copy($state.params); if (params['param3'] === undefined) { params['param3'] = 'default_param3'; } $state.go('parent_state.child', params) } }) .state('parent_state.child', { url: '/something/:param1/:param2/:param3', templateUrl: '....', controller: '....' }) 

Answer 8

添加angular-ui-router-default并将abstract和default选项添加到父状态：

…

 .state('manager.staffDetail.view', {abstract: true, default: '.schedule', url:'/view', templateUrl: 'views/staff.details.html', data:{activeMenu: 'staff'}}) .state('manager.staffDetail.view.schedule', {url:'/schedule', templateUrl:'views/staff.view.schedule.html', data:{activeMenu: 'staff'}}) 

…

注意：为了这个工作，父模板必须有<ui-view/>某个地方。

Answer 9

这是迟到了，但是这里的所有答案都不适用于AngularJS的最新版本的angular-ui-router。 至于那个版本（特别是@ uirouter / angularjs＃v1.0.x，你可以在$stateProvider.state()的第二个参数中加上redirectTo: 'childStateName' 。例如：

 $stateProvider .state('parent', { resolve: {...}, redirectTo: 'parent.defaultChild' }) .state('parent.defaultChild', {...}) 

以下是相关的文档部分： https ： //ui-router.github.io/guide/ng1/migrate-to-1_0#state-hook-redirectto

希望这可以帮助别人！