CODEWITHSUNDEEP
javascriptangularjsangular-ui-router
Yahya KACEM
Yahya KACEM

Reputation: 2481

how to make a default nested state for a non abstracted state

I'm using ui-router as follow:

3 main states home, profile and settings like this: enter image description here

The 2nd state profile have 2 nested states profile.about and profile.main enter image description here

I need that the profile state clickable on the index page loads the profile view and redirects to the default nested state which is profile.about here

enter image description here

Here's a plunker with what I got so far.

I'm aware of this solutions:

And others but all require an abstract parent which is unclickable hence abstract.

So, to summaries my question is how to make a nested default view for a non abstracted state?

Upvotes: 1

Views: 205

Answers (1)

Radim Köhler
Radim Köhler

Reputation: 123861

As discussed in comment, solution here would usually be with the .when() defintion as desribed here:

In version before 2.0.13 we could use the native solution like this (myService is a place for some default value... not needed if no params):

var whenConfig = ['$urlRouterProvider', function($urlRouterProvider) {

    $urlRouterProvider
      .when('/app/list', ['$state', 'myService', function ($state, myService) {
            $state.go('app.list.detail', {id: myService.Params.id});
    }])
    .otherwise('/app');
}];
...
app.config(whenConfig)

But after a fix in version 2.0.13 this is not working, but we can make it with this workaround:

var onChangeConfig = ['$rootScope', '$state',
 function ($rootScope, $state) {

  $rootScope.$on('$stateChangeStart', function (event, toState) {    
    if (toState.name === "app.list") { 
      event.preventDefault();
      $state.go('app.list.detail', {id: 2});
    }
  });

}]

See also this bug report for some other examples: https://github.com/angular-ui/ui-router/issues/1584

Upvotes: 1

Related Questions