Child state with ui-router not resolved

Question

I'm still working on an angular app, using the great ui-router. I'd like to use some dynamic nested states (I talked about it here), so I know it's possible.

Here is my code, with a specific state and its dynamic children states :

    .state('home', {

       url: '/home',
       controller: 'RouteCtrl'
    })

    .state('home.state', {

       url: '/home/:state',
       controller: 'RouteCtrl'
     })

     $urlRouterProvider.otherwise('/home')

I have 3 buttons (more specifically, I use <a> to make it) to access 3 differents states : 'home', 'contact' and 'about'. 'contact' and 'about' are 'home' nested states and every state has a specific text to display when activated.

Unfortunatly, it appears that both of the children states aren't resolved from 'home' state.

Here is a plunker of the problem which match with my problem. Any idea ?

score 1 · Answer 1 · answered Jul 06 '15 at 14:59

This will give you a working call to the new states:

$scope.redirect = function(state) {
    console.log('redirect to state : ' + state);

    if (state != 'home') {
      $state.go('home.state', {
        'state': state
      });
    } else {
      $state.go('home');
    }
  }

However, it still won't change the text on the page, because the controller only sets it once when initially loaded.

score 0 · Answer 2 · answered Jul 06 '15 at 14:50

The main problem here is that you want to have a variable in the state. You can't go to state home.about since it's not a given .state.

You should look at stateParams, or you can specify the URL where you want to go to the URL with Angular's $location.

Note: I think the url for a child state like home.state does not need the /home URL since it's in the father's state.

score 0 · Accepted Answer · answered Jul 06 '15 at 14:58

Technically home, contact and about are not 3 states. What you appear to be doing is altering the content based of the parameters of the state. This could be achieved using one state and forcing ui-router to reload the state when you use $state.go

I have modified your plunkr here http://plnkr.co/edit/XXaltjG17FwY15tSbKaD?p=preview

Your state definition could look something like this,

.state('home', {      
  url: '/home?state',
  controller: 'RouteCtrl'
})

The question mark makes the state parameter optional and also a query string.

The redirection could look something like this. You need to reload as you are going to the same route

$state.go('home', {state: state}, {reload: true});

Redirecting to the home page could look something like this. You need to disable inheritance for this redirect as you don't want to keep the query strings.

$state.go('home',{}, {reload: true, inherit: false});

Child state with ui-router not resolved

3 Answers3