Javascript 当用户使用UI路由器转换到其父状态时，将用户定向到子状态

考虑以下几点：

.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

子状态

首先，将属性添加到

'manager.staffDetail.view'

状态的

摘要：true

。这不是必需的，但是您想设置它，因为您永远不会直接进入该状态，您总是进入它的子状态之一

然后执行以下操作之一：

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

• 给

  “manager.staffDetail.view.schedule”指定一个空URL。这将使它与父状态url匹配，因为它不向父url追加任何内容
  
  .state（'manager.staffDetail.view.schedule'，{url:''，
  

• 或者，如果您希望保持默认子路由的url不变，则在module.config中设置一个重定向。此代码将

  '/staff/{id}/view'

  的任何位置重定向到

  '/staff/{id}/view/schedule'

  的位置：

  $urlRouterProvider.when（'/staff/{id}/view'，'/staff/{id}/view/schedule'）；

---

我将“manager.staffDetial.view”更改为抽象状态，并将默认子状态的url保留为空“”

---

很晚了，但我认为你可以“重定向”到你想要的状态

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

---

您可以在状态配置中直接写入控制器。

要设置默认子视图，请选中此项。单击

路由1

加载默认状态

路由1。列表

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

在“angular ui router”：“0.2.13”中，我认为@nfiniteloop的重定向解决方案不起作用。它在我回滚到0.2.12后就起作用了（并且可能不得不将$urlRouterProvider.when调用放在$stateProvider之前？）

看

以及解决方法（如果您不想回到0.2.12）

---

截至2014年11月28日，表示它应该在0.2.14中再次工作，这里有一个非常简单和透明的替代方案，只需修改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: '....'
  })

.state（'parent_state'{
url:“/something/：param1/：param2”，
templateUrl:'partials/something/parent_view.html'，//我遇到了同样的问题，发现这个解决方案可行：


这是从github上的@christopherthielen引用的

现在，不要声明您的状态摘要，请使用此配方：

以下是流程工作原理的详细说明：

用户导航到状态“父”
“$stateChangeStart”事件被激发
“$stateChangeStart”的侦听器捕获事件并将“toState”（即“父级”）和“事件”传递给处理程序函数
处理程序函数检查“redirectTo”是否设置为“toState”
如果未设置“redirectTo”，则不会发生任何事情，用户将继续进入“toState”状态
如果设置了“redirectTo”，则事件将被取消（event.preventDefault）并且$state.go（toState.redirectTo）将它们发送到“redirectTo”中指定的状态（即“parent.child”）
“$stateChangeStart”事件再次被触发，但这次“toState”==“parent.child”和“redirectTo”选项未设置，因此它将继续“toState”
向父状态添加并添加
抽象
和
默认
选项：



注意：要使其正常工作，父模板中必须有
。
这已经晚了，但是这里的所有答案不适用于AngularJS的angular ui router的最新版本。从该版本开始（具体来说，您可以将
重定向到：'childStateName'
放在
$stateProvider.state（）的第二个参数中）
。例如：

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

以下是相关文档部分：

希望这对某人有帮助！
所以你基本上完全按照我的建议做了……那么为什么不给我的答案打上正确的复选标记呢？这样我就可以得到代表分数。我不确定你是否知道“完全”这个词是什么意思意思是。但是，您的代码示例使用了routeProvider方法。我选择根本不使用它，而是将解决方案保留在状态管理器中。这样，代码保持干净，不会添加任何不必要的额外代码行。您的示例是一个可能的答案，但不是最可接受的答案。似乎您所做的一切，我已经提到（虽然，是的，我的示例中的代码是不必要的）。我：“…您应该将其设置为抽象状态。”你：“我将‘manager.staffDetial.view’更改为抽象状态…”我：“或者另一个选项是为schedule提供一个空URL。“你：…并将我默认子状态的URL保留为空”.说真的，没有什么不快的感觉，不过，我很高兴你明白了。对不起，你的回答令人困惑，而且不切题。读了你的解释后，我发现你给出了不同的选择，最后，如果我把你的第一个和最后一个选择结合起来，不考虑中间的建议，我会有一个解决办法。我想我明白你的方向了ing，但我不确定如果我将你的答案标记为答案是否会对下一位读者有所帮助。如果你想编辑你的答案并澄清你的答案，我很乐意给你答案。是的，你是对的，我在手机上写了答案…：P我已经清理了答案，我希望现在它更有意义。我还注意到，如果我在谷歌上搜索ui路由器e此线程是第四个结果，因此我们必须非常清楚。我尝试过，但它将双重加载控制器、解析和任何状态更改。我仅使用$urlRouterProvider.when（'/app/service'，'/app/service/list'）进行初始化当我们再次重定向到子级时，子级状态还会再次调用父级状态，因此将只加载两次或无限次。如果您的导航具有父级sref，它将无法在后续cli上工作
.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'}})

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