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

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

  • Меню событий (корень)
  • Дом (2 уровень)
  • Дом 1 (3 уровень)
  • Дом 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");
})

Полный пример см. в codepen: http://codepen.io/liamqma/pen/mtBne.

/event/home
/event/checkin

работают, но

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

не работают.

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


ionic-framework angularjs angularjs-routing
person Liam    schedule 16.02.2014    source источник
comment
Где ионная часть? Это выглядит как обычное приложение angularJS, нигде нет директив Ionic...   -  person Astronaut    schedule 29.10.2015

Ответы (1)


arrow_upward
51
arrow_downward

Я решил вашу проблему там: 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: {
    'menuContent@eventmenu' :{
      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 ;)

person Yacine Rezgui    schedule 05.06.2014
comment
проблема в том, что у вас нет приятных ионных переходов между страницами :'( тем не менее отличный пост @Yacine - person Marcel Falliere; 28.07.2015
comment
Что, если бы состояние eventmenu.home тоже было абстрактным слоем, как и eventmenu? - person rafaelmorais; 22.02.2016
comment
@MarcelFalliere, вам удалось добиться хорошего эффекта перехода в вашем случае? Я пробовал все, чтобы создать абстрактный слой для страницы уровня 2 с отдельным ion-nav-view, но представления прыгают...? - person ekussberg; 07.03.2016
comment
Спасибо. Другими словами, добавьте родителя с @ после имени представления. - person dlopezgonzalez; 12.10.2016