Ionic-framework: Template Sidemenu, ion-nav-back-button, ion-navicon e $ state.go ('/ app / playlists');
O modelo sidemenu tem vários estados aninhados definidos em app.js. Quando você navega para um estado aninhado (por exemplo, 'app.single'), a barra de navegação ion é atualizada com um botão '<Voltar'.
Quando você retorna à 'página inicial' ('/ app / playlists'), o botão Voltar é substituído por um ion-navicon (consulte menu.html). Você também pode fazer a transição para a página inicial (playlists.html) adicionando uma função simples a um controlador:
$scope.goHome = function() {
$state.go('app.playlists');
};
Se você adicionar outro nível de estado aninhado:
.state('app.playlists.classic-rock', {
url: "/classic-rock",
views: {
'menuContent<strong i="10">@app</strong>': {
templateUrl: "templates/classic-rock.html",
controller: 'ClassicRockController'
}
}
})
E invocar a função goHome () do controlador de visualizações, você faz a transição para a página inicial, mas o botão Voltar NÃO é substituído pelo ion-navicon?
Este também é o caso se você navegar de uma visualização para outra e, em seguida, voltar para a 'página inicial':
- http: // localhost : 8100 / # / app / playlists (ion-nav-bar tem ion-navicon)
- http: // localhost : 8100 / # / app / playlists / 1 (ion-nav-bar tem o botão '<Voltar')
- http: // localhost : 8100 / # / app / playlists / 2 (ion-nav-bar tem o botão '<Voltar')
- http: // localhost : 8100 / # / app / playlists (ion-nav-bar tem o botão '<Voltar', mas deve ter ion-navicon)
RobFerguson
Todos 3 comentários
No menu.html do template secundário:
<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>
Os botões ion-nav devem ser um descendente direto de ion-nav-view, NÃO ion-nav-bar.
Menu.html atualizado:
<ion-nav-bar class="bar-stable">
<ion-nav-back-button>
</ion-nav-back-button>
</ion-nav-bar>
e playlists.html atualizado:
<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>
Portanto, o que você está descrevendo e a marcação estão realmente corretos.
http://codepen.io/mhartington/pen/azwojR
O que você está descrevendo é causado pelo atributo menu-close.
http://ionicframework.com/docs/api/directive/menuClose/
Portanto, quando você navegar pelo menu lateral, os links que possuem o atributo menu close limparão o histórico e evitarão que um botão voltar seja mostrado.
No seu caso, você está navegando via $state.go , que não tem a lógica que o menu-close fornece.
Portanto, você precisa adicionar um pouco a ele.
$scope.goHome = function() {
$state.go('app.playlists');
$ionicHistory.nextViewOptions({
historyRoot: true
});
};
mhartington
em 18 fev. 2015
thanx @mhartington ....
resolveu meu problema ...
foram-patel
em 7 set. 2016
Questões relacionadas
Macstyg
·
3Comentários
MrBokeh
·
3Comentários
giammaleoni
·
3Comentários
Nick-The-Uncharted
·
3Comentários
fdnhkj
·
3Comentários
Comentários muito úteis
Portanto, o que você está descrevendo e a marcação estão realmente corretos.
http://codepen.io/mhartington/pen/azwojR
O que você está descrevendo é causado pelo atributo menu-close.
http://ionicframework.com/docs/api/directive/menuClose/
Portanto, quando você navegar pelo menu lateral, os links que possuem o atributo menu close limparão o histórico e evitarão que um botão voltar seja mostrado.
No seu caso, você está navegando via
$state.go, que não tem a lógica que o menu-close fornece.Portanto, você precisa adicionar um pouco a ele.