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

Add angular-ui-router-default and add the abstract and default options to the parent state:

...

.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: for this to work, the parent template must have somewhere in it.