CODEWITHSUNDEEP
angularjsangular-ui-router
mtpultz
mtpultz

Reputation: 18268

UI-Router How to automatically load a nested view within the parent view as a default

I've been playing with UI-Router since ngRoute doesn't quite cover what I needed based on my different layouts requiring multiple nested views. What I can't figure out in UI-Router is how to load default nested views without having to click a link. I created a crude example of what I'm mean in a plunker

Essentially there are two main route within each there is a container which hosts nested views. I want to load a default view into them without have to click a ui-sref.

<h1>Auth Panel</h1> <-- main route 1
Just a container for login/forgot/reset
<hr/>
<a ui-sref="auth.login">Show Login</a><br> <-- can click to load nested view, but want to autoload
How to show automatically /login within the panel <br>
without having to click show login?
<div ui-view></div> <-- child to autoload with /login

Thanks

Upvotes: 10

Views: 4289

Answers (2)

Kiran Kota
Kiran Kota

Reputation: 103

On your parent state add a param

.state('parentState', {
//...
    params: {
        autoActivateChild: 'parentState.childState'
    }
//...
})

And add this somewhere

$rootScope.$on('$stateChangeSuccess', function(event, toState){
    var aac;
    if(aac = toState && toState.params && toState.params.autoActivateChild){
        $state.go(aac);
    }
});

Upvotes: 12

metamlkshk
metamlkshk

Reputation: 261

If you wanted to navigate automatically to a default child state when the parent loads, you could trigger a click on that particular ui-sref in your controller.

angular.element("#childElementId").trigger('click');

Upvotes: -1

Related Questions