Ionic-framework: Plantilla de menú lateral, ion-nav-back-button, ion-navicon y $ state.go ('/ app / playlists');
La plantilla del menú lateral tiene varios estados anidados definidos en app.js. Cuando navega a un estado anidado (por ejemplo, 'app.single'), la barra de navegación de iones se actualiza con un botón '<Atrás'.
Cuando regresa a la 'página de inicio' ('/ app / playlists'), el botón de retroceso se reemplaza con un ion-navicon (consulte menu.html). También puede pasar a la página de inicio (playlists.html) agregando una función simple a un controlador:
$scope.goHome = function() {
$state.go('app.playlists');
};
Si agrega otro nivel de estado anidado:
.state('app.playlists.classic-rock', {
url: "/classic-rock",
views: {
'menuContent<strong i="10">@app</strong>': {
templateUrl: "templates/classic-rock.html",
controller: 'ClassicRockController'
}
}
})
E invoque la función goHome () desde el controlador de vistas que hace la transición a la página de inicio, sin embargo, el botón de retroceso NO se reemplaza con el ion-navicon.
Este también es el caso si navega de una vista a otra vista y luego vuelve a la 'página de inicio':
- http: // localhost : 8100 / # / app / playlists (ion-nav-bar tiene ion-navicon)
- http: // localhost : 8100 / # / app / playlists / 1 (ion-nav-bar tiene el botón '<Atrás')
- http: // localhost : 8100 / # / app / playlists / 2 (ion-nav-bar tiene el botón '<Atrás')
- http: // localhost : 8100 / # / app / playlists (ion-nav-bar tiene el botón '<Atrás' pero debería tener ion-navicon)
RobFerguson
Todos 3 comentarios
En menu.html de la plantilla del menú lateral:
<ion-nav-bar class="bar-stable">
<ion-nav-back-button>
</ion-nav-back-button>
<ion-nav-buttons side="left">
<button class="button button-icon button-clear ion-navicon"
menu-toggle="left">
</button>
</ion-nav-buttons>
</ion-nav-bar>
ion-nav-botones debe ser un descendiente directo de ion-nav-view NO ion-nav-bar.
Menu.html actualizado:
<ion-nav-bar class="bar-stable">
<ion-nav-back-button>
</ion-nav-back-button>
</ion-nav-bar>
y playlists.html actualizado:
<ion-view view-title="Playlists">
<ion-nav-buttons side="left">
<button class="button button-icon button-clear ion-navicon"
menu-toggle="left">
</button>
</ion-nav-buttons>
<ion-content>
<ion-list>
<ion-item ng-repeat="playlist in playlists"
href="#/app/playlists/{{playlist.id}}">
{{playlist.title}}
</ion-item>
</ion-list>
</ion-content>
</ion-view>
Entonces, lo que está describiendo y el marcado es realmente correcto.
http://codepen.io/mhartington/pen/azwojR
Lo que está describiendo es causado por el atributo de cierre de menú.
http://ionicframework.com/docs/api/directive/menuClose/
Entonces, cuando navega a través del menú lateral, los enlaces que tienen el atributo de cierre del menú borrarán el historial y evitarán que se muestre un botón de retroceso.
En su caso, está navegando a través de $state.go , que no tiene la lógica que proporciona el cierre del menú.
Por lo tanto, necesitaría agregarle un poco.
$scope.goHome = function() {
$state.go('app.playlists');
$ionicHistory.nextViewOptions({
historyRoot: true
});
};
mhartington
en 18 feb. 2015
gracias @mhartington ....
resolvió mi problema ...
foram-patel
en 7 sept. 2016
Temas relacionados
Macstyg
·
3Comentarios
MrBokeh
·
3Comentarios
alan-agius4
·
3Comentarios
alexbainbridge
·
3Comentarios
BilelKrichen
·
3Comentarios
Comentario más útil
Entonces, lo que está describiendo y el marcado es realmente correcto.
http://codepen.io/mhartington/pen/azwojR
Lo que está describiendo es causado por el atributo de cierre de menú.
http://ionicframework.com/docs/api/directive/menuClose/
Entonces, cuando navega a través del menú lateral, los enlaces que tienen el atributo de cierre del menú borrarán el historial y evitarán que se muestre un botón de retroceso.
En su caso, está navegando a través de
$state.go, que no tiene la lógica que proporciona el cierre del menú.Por lo tanto, necesitaría agregarle un poco.