Directing the user to a child state when they are transitioning to its parent state using UI-Router

Question

Consider the following:

.state(\'manager.staffList\', {url:\'^/staff?alpha\', templateUrl: \'views/staff.list.html\', data:{activeMenu: \'staff\'}, controlle         


        

Answer 1

In "angular-ui-router": "0.2.13", I don't think @nfiniteloop's redirect solution will work. It worked once I had rolled back to to 0.2.12 (and may have had to put the $urlRouterProvider.when call before the $stateProvider?)

see https://stackoverflow.com/a/26285671/1098564

and https://stackoverflow.com/a/27131114/1098564 for a workaround (if you don't want to go back to 0.2.12)

as of Nov 28 2014, https://github.com/angular-ui/ui-router/issues/1584 indicates that it should work again in 0.2.14

Answer 2

here is a very simple and transparent alternative by just modifying parent state in ui router:

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

This is late but all the answers here don't apply to the latest version of angular-ui-router for AngularJS. As of that version (specifically @uirouter/angularjs#v1.0.x you can just put redirectTo: 'childStateName' in the second param of $stateProvider.state(). For example:

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

Here is the relevant doc section: https://ui-router.github.io/guide/ng1/migrate-to-1_0#state-hook-redirectto

Hopefully this helps someone!

Answer 4

Quite late but I think you can "redirect" to the state you want.

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

You can write you controller right in the state config for short.

Answer 5

I changed 'manager.staffDetial.view' to an abstract state and left the url of my default child state to blank ''

// 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

1. First, add a property to the 'manager.staffDetail.view' state of abstract:true. This isn't required, but you want to set this since you'd never go to this state directly, you'd always go to one of it's child states.

2. Then do one of the following:

   • Give the 'manager.staffDetail.view.schedule' state an empty URL. This will make it match the same url as it's parent state url, because it appends nothing to the parent url.

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

   • Or if you want to keep the url of the default child route unchanged, then set up a redirect in your module.config. This code here will redirect any location of '/staff/{id}/view' to the location of '/staff/{id}/view/schedule':

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