with - Angularjs estados anidados: nivel 3

sanitizer angularjs

Question

Estoy usando Agnularjs y Ionic Framework. Estoy tratando de lograr un estado anidado, que se ve a continuación,

• Eventmenu (raíz)
• Inicio (2 niveles)
• Inicio 1 (3 niveles)
• casa 2
• registrarse
• asistente

Mi archivo de rutas parece,

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

Para ver un ejemplo completo, consulte el codepen: http://codepen.io/liamqma/pen/mtBne

/event/home
/event/checkin

están trabajando, pero

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

no están funcionando.

Cualquier ayuda es muy apreciada. ¡Gracias!

Answer 1

Solucioné tu problema allí: http://codepen.io/yrezgui/pen/mycxB

Básicamente, Ionic usa Angular-UI-Router que tiene una API enorme. En su caso, debe verificar este enlace para comprender: https://github.com/angular-ui/ui-router/wiki/Multiple-Named-Views#view-names---relative-vs-absolute-names

Para ser cortos, los estados home1 y home2 son hijos del estado de origen, por lo que no pueden tener acceso a la vista de contenido del menú, porque está relacionado con el estado del menú de eventos.

Entonces necesitas escribir:

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

En lugar de :

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

Y home1 no funcionaba incluso después de esta modificación porque su url era:

url: "/home/home1",

En lugar de :

url: "/home1",

Al escribir eventmenu.home.home1 , convierte home1 en un hijo de su hogar , por lo que su url necesita ser relativa, no absoluta.

Espero que lo entiendas y te diviertas con Ionic;)