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