Diriger l'utilisateur vers un état enfant lorsqu'il passe à l'état parent en utilisant UI-Router.

Question

Considérez ce qui suit :

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

Si je vais à example.com/staff/1234/view comment puis-je passer à l'option par défaut manager.staffDetail.view.schedule l'état d'enfant ?

Answer 1

Dans "angular-ui-router" : "0.2.13", je ne pense pas que la solution de redirection de @nfiniteloop fonctionnera. Elle a fonctionné une fois que j'ai rétabli la version 0.2.12 (et j'ai peut-être dû placer l'appel $urlRouterProvider.when avant l'appel $stateProvider).

véase https://stackoverflow.com/a/26285671/1098564

et https://stackoverflow.com/a/27131114/1098564 pour une solution de contournement (si vous ne voulez pas revenir à la version 0.2.12)

en date du 28 novembre 2014, https://github.com/angular-ui/ui-router/issues/1584 indique qu'il devrait fonctionner à nouveau dans la version 0.2.14

Answer 2

C'est en retard mais toutes les réponses ici ne s'appliquent pas à la dernière version de angular-ui-router pour AngularJS. A partir de que (en particulier @uirouter/angularjs#v1.0.x vous pouvez simplement mettre redirectTo: 'childStateName' dans le deuxième paramètre de $stateProvider.state() . Par exemple :

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

Voici la section pertinente du document : https://ui-router.github.io/guide/ng1/migrate-to-1_0#state-hook-redirectto

J'espère que cela aidera quelqu'un !

Answer 3

Voici une alternative très simple et transparente en modifiant simplement l'état du parent dans le routeur de l'interface utilisateur :

  .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 4

Ajouter angular-ui-router-default et ajoutez le abstract y default à l'état parent :

...

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

...

Note : pour que cela fonctionne, le modèle parent doit avoir <ui-view/> quelque part dedans.