web-dev-qa-db-fra.com

Angularjs États imbriqués: niveau 3

J'utilise Agnularjs et Ionic Framework. J'essaie d'atteindre un état imbriqué, qui ressemble à ci-dessous,

  • Menu d'événement (racine)
  • Maison (2 niveaux)
  • Maison 1 (3 niveaux)
  • Accueil 2
  • enregistrement
  • participant

Mon fichier de routes ressemble,

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

Pour un exemple complet, veuillez voir codepen: http://codepen.io/liamentqma/pen/mtBne

/event/home
/event/checkin

travaillent, mais

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

ne fonctionnent pas.

Toute aide est grandement appréciée. Merci!

angularjsangularjs-routingionic-framework
31
Liam

J'ai résolu votre problème là-bas: http://codepen.io/yrezgui/pen/mycxB

Fondamentalement, Ionic utilise Angular-UI-Router qui a une énorme API. Dans votre cas, vous devez vérifier ce lien pour comprendre: https://github.com/ angular-ui/ui-router/wiki/Multiple-Named-Views # vues-noms --- noms-relatifs-absolus

Pour être bref, les états home1 et home2 sont des enfants de l'état d'origine, ils ne peuvent donc pas accéder à la vue menuContent, car elle est liée à l'état du menu d'événements.

Vous devez donc écrire:

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

Au lieu de :

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

Et home1 ne fonctionnait pas même après cette modification car son URL était:

url: "/home/home1",

Au lieu de :

url: "/home1",

En écrivant eventmenu.home.home1, vous faites home1 un enfant de home , son URL doit donc être relative et non absolue.

J'espère que vous le comprenez et vous amusez avec Ionic;)

50
Yacine Rezgui