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 の子状態にするにはどうしたらよいでしょうか？

どのように解決するのですか？

1. まず、プロパティを 'manager.staffDetail.view' の状態にします。 abstract:true . これは必須ではありませんが、この状態に直接行くことはなく、常にこの状態の子状態のいずれかに行くことになるので、これを設定したいと思います。

2. 次に 一つ のいずれかを実行します。

   • を与える。 'manager.staffDetail.view.schedule' 状態に 空の URL . これは、親状態のurlに何も追加しないので、親状態のurlと同じurlにマッチするようになります。

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

   • また、デフォルトの子ルートのurlを変更しないようにしたい場合は、子ルートのurlに リダイレクト を設定します。このコードでは '/staff/{id}/view' の場所を '/staff/{id}/view/schedule' :

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