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

For setting default child view , check this example . On clicking Route 1 load default state route1.list

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

Answer 2

I ran into the same issue and found this solution to work:

https://github.com/angular-ui/ui-router/issues/948#issuecomment-75342784

This is quoted from @christopherthielen on github

"For now, don't declare your state abstract, and use this recipe:"

 app.run($rootScope, $state) {
    $rootScope.$on('$stateChangeStart', function(evt, to, params) {
      if (to.redirectTo) {
        evt.preventDefault();
        $state.go(to.redirectTo, params)
      }
    });
  }

  $stateProvider.state('parent' , {
      url: "/parent",
      templateUrl: "parent.html",
      redirectTo: 'parent.child'
  });

  $stateProvider.state('parent.child' , {
      url: "/child",
      templateUrl: "child.html"
  });

Here is breakdown of how the process works:

1. User navigates to state “parent”
2. “$stateChangeStart” event gets fired
3. Listener for “$stateChangeStart” catches event and passes “toState” (which is “parent”) and “event" to the handler function
4. Handler function checks if “redirectTo” is set on “toState”.
5. If “redirectTo” IS NOT set, nothing happening and the user continues on to the “toState” state.
6. If “redirectTo" IS set, the event is canceled (event.preventDefault) and $state.go(toState.redirectTo) sends them to the state specified in “redirectTo” (which is “parent.child”).
7. The “$stateChangeStart” event gets fired again, but this time “toState” == “parent.child” and the “redirectTo” option is not set, so it continues to “toState”.

Answer 3

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 <ui-view/> somewhere in it.