Nested state not loading with sidemenu

ionic-v1
1

Hi guys,

I searched but couldn’t find anything related. I set a codepen to illustrate the problem:

To reproduce: Open side menu -> Click Attendees and then click on the button Go to subpage.

Nothing happens. What I’m missing here? I tried with ui-sref and normal href link.

2

Problem is that your stateProvider isn’t linking to the correct Url. Subpage is a subdirectory of Attendees so you’ll need to fix your stateProvider so that it reflects that. See code below:

.state('eventmenu.attendees.subpage', {
      url: "attendees/subpage",
      views: {
        'menuContent' :{
          templateUrl: "templates/subpage.html",
          controller: "AttendeesSubpageCtrl"
        }
      }
    })
3

Did you test it on the Codepen? Because it isn’t working… It’s leading me to home.

4

The “dot” in the state names means something special, specifically for inserting things into the menuContent ion-nav-view you can only have a state named eventmenu.XXXXXXXXX, so i’ve just changed your eventmenu.attendees.subpage to eventmenu.attendees-subpage and it works.

.state('eventmenu.attendees-subpage', {
      url: "/subpage",
      views: {
        'menuContent' :{
          templateUrl: "templates/subpage.html",
          controller: "AttendeesSubpageCtrl"
        }
      }
    })

I’m about to release a course on ionic and i’ve been editing a whole lecture today on this topic, signup on codecraftpro.com and i’ll ping you when it’s ready.

5

Where is in the documentation that sidemenu views can only have one child state?

6

All right, I found the problem.

My subpage state need to be like this:

.state('eventmenu.attendees.subpage', {
      url: "/subpage",
      views: {
        'menuContent@eventmenu' :{
          templateUrl: "templates/subpage.html",
          controller: "AttendeesSubpageCtrl"
        }
      }
    })

Now it works.

7

It’s not a feature of “sideMenu” it’s part of the uiRouter documentation

And it doesn’t mean it can only have one child state, you can have others but it’s just there is a link between the state name and the view that the template will be inserted into, need to think about the dots very very carefully.

When you wrote:

.state('eventmenu.attendees.subpage', {
  url: "/subpage",
  views: {
    'menuContent' :{
      templateUrl: "templates/subpage.html",
      controller: "AttendeesSubpageCtrl"
    }
  }
})

You are telling uiRouter that you want to insert the template subpage.html into the view named menuContent in the state eventmenu.attendees (it’s parent) BUT the view named menuContent isn’t in the eventmenu.attendees state it’s in the eventmenu state (it’s parents parents state) so it can’t find it.

The easiest solution (it’s not the only one!) is to just change the state name from eventmenu.attendees.subpage to eventmenu.attendees-subpage so that the parent state is eventmenu and so uiRouter can find the menuContent view.

If you read through the docs i posted above though you’ll find there are quite a few other ways to config uiRouter but i reckon sticking to the above will avoid a lot of pitfalls.

8

See my previous post.

I needed to tell to this child state where to render, in this case, at 'menuContent@eventmenu'. Now it works as expected.

9

Yeah menucontent@eventmenu is another solution, double check the back button still works though - i’ve seen in another thread an issue with the back button not functioning when using this kind of syntax.