Nested states: 3 level

ionic-v1
1

I am trying to achieve a nested states, which looks like below,

–Eventmenu(root)
----Home(2 level)
------Home 1(3 level)
------Home 2
----checkin
----attendee

My routes file looks like,

angular.module('ionicApp', ['ionic'])

.config(function($stateProvider, $urlRouterProvider) {

  $stateProvider
    .state('eventmenu', {
      url: "/event",
      abstract: true,
      templateUrl: "event-menu.html"
    })
    .state('eventmenu.home', {
      url: "/home",
      views: {
        'menuContent' :{
          templateUrl: "home.html"
        }
      }
    })
      .state('eventmenu.home.home1', {
      url: "/home1",
      views: {
        'menuContent' :{
          templateUrl: "home1.html"
        }
      }
    })
        .state('eventmenu.home.home2', {
      url: "/home2",
      views: {
        'menuContent' :{
          templateUrl: "home2.html"
        }
      }
    })
    .state('eventmenu.checkin', {
      url: "/check-in",
      views: {
        'menuContent' :{
          templateUrl: "check-in.html",
          controller: "CheckinCtrl"
        }
      }
    })
    .state('eventmenu.attendees', {
      url: "/attendees",
      views: {
        'menuContent' :{
          templateUrl: "attendees.html",
          controller: "AttendeesCtrl"
        }
      }
    })
  
  $urlRouterProvider.otherwise("/event/home");
})

For full example, please see codepen: http://codepen.io/liamqma/pen/mtBne

/event/home
/event/checkin

are working, but

/event/home/home1
/event/home/home 2

are not working.

Any help is greatly appreciated. Thanks.

1 Like
2

Did you ever get this working? I am in the same boat.

I created a plunker http://plnkr.co/edit/9wIy4HyUhGEmQ33VowQ5?p=preview for my example and don’t understand why it isn’t working properly.

3

I struggled with ui-router and states as well; so, I’m not a lot of help here.

Anyone else have suggestions?

4

I’m with @Calendee on this one, states aren’t my strength. Luckily the guys who wrote UI-router had a sample app that shows the multi-level nested routes. Heres the working demo that actually shows the states and the .js file that has all the states.

I think what you may end up needing to do is use the ui-router’s ui-view instead of ionics ion-view since the latter will have some functionality already built on top of it.

Edit

So I put together a small example, based on @liamqma codepen to show the multiple nested views. Keep in mind that this uses ui-routers ui-view instead. http://codepen.io/mhartington/pen/Bicmo

1 Like
5

I’m also super confused about the nesting but I got 3 deep nesting to work with the following:

home -> seasons -> leagues
Here is my ui router states:

.state('tab.home', {
  url: '/home',
  views: {
    'home-tab': {
      templateUrl: 'templates/home.html',
      controller: 'HomeCtrl'
    }
  }
})

.state('tab.seaons', {
  url: '/seasons',
  views: {
    'home-tab': {
      templateUrl: 'templates/seasons.html',
      controller: 'SeasonsCtrl'
    }
  }
})

.state('tab.leagues', {
  url: '/leagues',
  views: {
    'home-tab': {
      templateUrl: 'templates/leagues.html',
      controller: 'LeaguesCtrl'
    }
  }
})

The strange thing here is that the states don’t really have a “nested” relationship of any kind. The only thing that is holding them together is the fact that they change the same ‘view’ (home-tab), and the links to change states are in their respective parent’s template.

Here is the link to go from home -> seasons in the home template:

<a href="#/tab/seasons" class="button button-block button-balanced">
  View Schedules
</a>

No notion of nesting that I can tell, but it somehow works. Again, here is the button to go from seasons -> leagues in the seasons template

<a href="#/tab/leagues" class="button button-block button-balanced">
  View Leagues
</a>

Same thing… No notion of nested states but it somehow works with navigation back buttons and all, 3 levels deep.

One other thing I noticed even though it might be obvious. I HAD to have an at a minimum in each template for nav nesting to work.

If anybody has any idea on how this actually works it would be great to hear.

6

I have been looking at these examples of using state and copied the code into my project. I noticed that ionic.bundle.min.js is 0.9.24, but when I changed to 0.9.26 it no longer works. Any idea why latest release of ionic does not work in this case? Sorry I forgot to state that I am referring to the code in http://codepen.io/mhartington/pen/Bicmo

7

@greenfish, I updated the codepen to the newest version of ionic, at 0.9.25 (I think) they prefixed all ionic specific directives so thats why it didn’t work when you updated. Heres the new link

Voicing my opinion here, as far having three nested states, I think that this should be approached with caution. If Jurassic Park has taught me anything its that just because we can do something, it doesn’t mean we should. Just some food for thought…

1 Like
8

Any updates to this issue?

I’m running into the same issue on beta.10.

Navigate to a 3rd level nested state, and nothing happens. Since ionic uses an abstract state for tab which uses nesting, this means we can’t really implement nesting beyond that, and have to depend on navigation state history like what @snowman4415 did above.

This breaks down when doing deep linking though. When we transition to a “nested” state, there’s no state history for the back button.

9

Just my two cents coming from a mobile dev point of view. Nesting is very important for navigation stacks on mobile with small screen sizes and limited real estate to work with in comparison to web. I know angular routing was maybe not built with this in mind but I do think it will be a very important feature for Ionic moving forward.

10

@snowman4415 I haven’t looked into the code deeply, so I could be completely wrong.

Angular ui-router has a fairly complete implementation of nested states. The url in my browser’s nav bar changes as expected, but nothing else happens. I think it’s one of the ion-* directives not handling > 2 levels of nesting.

11

I spent some time steping through the code, and got 3 level nesting to work.

The key is the name of the view: ‘tab-meals@tab’

Essentially I looked at $state.$current.locals to see what I should name the view.

https://github.com/driftyco/ionic/blob/master/js/angular/directive/navView.js#L157

.state('tab.meals.meal-detail', {
  url: '/:mealId',
  views: {
    'tab-meals@tab': {
      ...
    }
  }
})
5 Likes
12

I’ve based my states on the ideas from this article.

1 Like
13

I ended up solving the nested states problem in a similar way. I had trouble getting the back button and tab switching to function as I would expect, so I ended up writing some custom logic. Thought some people in this topic might find it useful.

14

@snowman4415 Did you ever get to resolve this?

15

Indeed, It solve me from the hell,thx,:slight_smile:

16

SOLVED!

Et al,

I remembered seeing some detailed docs on this in the past (when just using Angular-UI-Router for regular Web). As it turns out, Angular-UI has some great docs on using multiple and nested views – and there are some other great resources out there.

What you probably want is to reference an absolute view:

.state('app.lists.list', {
    url: '/:listId',
    views: {
        'menuContent@app': {
            templateUrl: '/lists/list/list-view.html',
            controller: 'ListController'
        }
    }
})

Simply, to reference a view – relative to a certain state – you’ve to target the state-name after the view-name. In other words –

...
'menuContent@': { ... }
...

– references a view named “menuContent” implicitly off of the app.lists.list state (regarding the code block above). Which is the same as 'menuContent': { ... }. If I had the same view inside of app.lists, I would reference it using menuContent@app.lists [verification needed].

This article goes into some good detail about it.
(https://github.com/angular-ui/ui-router/wiki/Multiple-Named-Views#view-names—relative-vs-absolute-names)

Hope this helps you as much as it did I.

5 Likes
17

A little late but I created a codepen to update a child view when a button or sidemenu item is pressed

18

Hi, not late for me, thanks you, it helps me a lot ! That’s exaclty what I needed.

1 Like
19

try this

angular.module('ionicApp', ['ionic'])

.config(function($stateProvider, $urlRouterProvider) {

  $stateProvider
    .state('eventmenu', {
      url: "/event",
      abstract: true,
      templateUrl: "event-menu.html"
    })
    .state('eventmenu.home', {
      url: "/home",
      views: {
        'menuContent' :{
          templateUrl: "home.html"
        }
      }
    })
      .state('eventmenu.home/home1', {
      url: "/home1",
      views: {
        'menuContent' :{
          templateUrl: "home1.html"
        }
      }
    })
        .state('eventmenu.home/home2', {
      url: "/home2",
      views: {
        'menuContent' :{
          templateUrl: "home2.html"
        }
      }
    })
    .state('eventmenu.checkin', {
      url: "/check-in",
      views: {
        'menuContent' :{
          templateUrl: "check-in.html",
          controller: "CheckinCtrl"
        }
      }
    })
    .state('eventmenu.attendees', {
      url: "/attendees",
      views: {
        'menuContent' :{
          templateUrl: "attendees.html",
          controller: "AttendeesCtrl"
        }
      }
    })

  $urlRouterProvider.otherwise("/event/home");
})