Angularjs Nested states: 3 level

Question

I am using Agnularjs and Ionic Framework. 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/home2

are not working.

Any help is greatly appreciated. Thanks!

Answer 1

I solved your problem there : http://codepen.io/yrezgui/pen/mycxB

Basically, Ionic is using Angular-UI-Router which has a huge API. In your case, you need to check this link to understand : https://github.com/angular-ui/ui-router/wiki/Multiple-Named-Views#view-names---relative-vs-absolute-names

To be short, home1 and home2 states are children of home state, so they can't have access of menuContent view, because it's related to eventmenu state.

So you need to write :

.state('eventmenu.home.home2', {
  url: "/home2",
  views: {
    'menuContent@eventmenu' :{
      templateUrl: "home2.html"
    }
  }
})

Instead of :

.state('eventmenu.home.home2', {
  url: "/home2",
  views: {
    'menuContent' :{
      templateUrl: "home2.html"
    }
  }
})

And home1 wasn't working even after this modification because its url was :

url: "/home/home1",

Instead of :

url: "/home1",

By writing eventmenu.home.home1, you make home1 a child of home, so its url needs to be relative, not absolute.

Hope you understand it and have fun with Ionic ;)