Angularjs Вложенные состояния: 3 уровня

Я использую Agnularjs и Ionic Framework. Я пытаюсь создать вложенные состояния, которые выглядят ниже,

Eventmenu (root)
Home (2 уровня)
Home 1 (3 уровня)
Home 2
приезд
участник

Мой файл маршрутов выглядит,

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");
})

В качестве полного примера см. код: http://codepen.io/liamqma/pen/mtBne

/event/home
/event/checkin

работают, но

/event/home/home1
/event/home/home2

не работают.

Любая помощь приветствуется. Спасибо!

Ответ 1

Я решил вашу проблему там: http://codepen.io/yrezgui/pen/mycxB

В принципе, Ionic использует Angular -UI-Router с огромным API. В вашем случае вам нужно проверить эту ссылку, чтобы понять: https://github.com/angular-ui/ui-router/wiki/Multiple-Named-Views#view-names---relative-vs-absolute-names

Чтобы быть коротким, home1 и home2 состояния - это дети домашнего состояния, поэтому они не могут иметь доступ к представлению menuContent, потому что это связано с состоянием eventmenu.

Итак, вам нужно написать:

.state('eventmenu.home.home2', {
  url: "/home2",
  views: {
    '[email protected]' :{
      templateUrl: "home2.html"
    }
  }
})

Вместо:

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

И home1 не работал даже после этой модификации, потому что его URL был:

url: "/home/home1",

Вместо:

url: "/home1",

Создавая файл eventmenu.home.home1, вы делаете home1 дочерний элемент home, поэтому его URL должен быть относительным, а не абсолютным.

Надеюсь, вы это понимаете и получайте удовольствие от Ionic;)