Three level state resolution is not working

ionic-v1
1

I am building a application.
The application state config file

// setup an abstract state for the application
    .state('app', {
      url: "/app",
      abstract: true,
      templateUrl: "templates/menus.html",
      controller: 'MenuCtrl'
    })
    .state('app.parent', {
      url: "/parent",
      views: {
        'menuContent': {
          templateUrl: "templates/parent.html",
          controller: 'ParentCtrl'
        }
      }
    })
    .state('app.parent.child, {
      url: "/child",
      views: {
        'menuContent': {
          templateUrl: "templates/child.html",
          controller: 'ChildCtrl'
        }
      }
    })

I have a button in parent state which should redirect to child state, on button click I am doing

$state.go('app.parent.child');

However on button click the url is getting changed to app/parent/child but the child view is not loaded. I put console log in child controller the controller also is not getting triggered.

Is this a bug ? or am I missing something ?

2 Likes
2

You need an <ion-nav-view> inside the top level template with a name attribute, in this case or ‘menuContent’. This is where the child states will get injected since you have set their views to that.

The templates of the child states also need to be wrapped in an <ion-view> tag

3

There is a main index.html file. That file is having <ion-nav-view> directive. It is working except for this specific case.

If I make the ‘child’ state child of ‘app’ like

   .state('app.child, {
      url: "/child",
      views: {
        'menuContent': {
          templateUrl: "templates/child.html",
          controller: 'ChildCtrl'
        }
      }
    })

and then navigate to ‘child’ state like

$state.go('app.child');

it is working fine