Ionic-framework: Modèle de menu latéral, ion-nav-back-button, ion-navicon et $state.go('/app/playlists');

Créé le 4 janv. 2015  ·  3Commentaires  ·  Source: ionic-team/ionic-framework

Le modèle de menu latéral a plusieurs états imbriqués définis dans app.js. Lorsque vous naviguez vers un état imbriqué (par exemple, « app.single »), la barre de navigation ionique est mise à jour avec un bouton « < Retour ».

Lorsque vous revenez à la 'page d'accueil' ('/app/playlists'), le bouton de retour est remplacé par un ion-navicon (voir menu.html). Vous pouvez également passer à la page d'accueil (playlists.html) en ajoutant une fonction simple à une manette :

$scope.goHome = function() {
  $state.go('app.playlists');
};

Si vous ajoutez un autre niveau d'état imbriqué :

.state('app.playlists.classic-rock', {
  url: "/classic-rock",
  views: {
    'menuContent<strong i="10">@app</strong>': {
      templateUrl: "templates/classic-rock.html",
       controller: 'ClassicRockController'
    }
  }
})

Et invoquez la fonction goHome () à partir du contrôleur de vues, vous passez à la page d'accueil, mais le bouton de retour n'est PAS remplacé par l'ion-navicon?

C'est également le cas si vous naviguez d'une vue à l'autre puis revenez à la « page d'accueil » :

  • http://localhost :8100/#/app/playlists (ion-nav-bar a ion-navicon)
  • http://localhost :8100/#/app/playlists/1 (ion-nav-bar a un bouton '< Back')
  • http://localhost :8100/#/app/playlists/2 (ion-nav-bar a un bouton '< Back')
  • http://localhost :8100/#/app/playlists (ion-nav-bar a le bouton '< Back' mais devrait avoir ion-navicon)
picture RobFerguson

Commentaire le plus utile

Donc, ce que vous décrivez et le balisage sont en fait corrects.

http://codepen.io/mhartington/pen/azwojR

Ce que vous décrivez est causé par l'attribut menu-close.

http://ionicframework.com/docs/api/directive/menuClose/

Ainsi, lorsque vous naviguez via le menu latéral, les liens dotés de l'attribut de fermeture de menu effacent l'historique et empêchent l'affichage d'un bouton de retour.

Dans votre cas, vous naviguez via $state.go , qui n'a pas la logique fournie par menu-close.

Il faudrait donc en rajouter un peu.

$scope.goHome = function() {
  $state.go('app.playlists');
  $ionicHistory.nextViewOptions({
    historyRoot: true
  });
};
picture mhartington le 18 févr. 2015
👍6

Tous les 3 commentaires

Dans le menu.html du modèle de menu latéral :

<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-buttons doit être un descendant direct de ion-nav-view PAS ion-nav-bar.

Menu.html mis à jour :

<ion-nav-bar class="bar-stable">
      <ion-nav-back-button>
      </ion-nav-back-button>
</ion-nav-bar>

et playlists.html mises à jour :

<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>
RobFerguson picture RobFerguson le 5 janv. 2015

Donc, ce que vous décrivez et le balisage sont en fait corrects.

http://codepen.io/mhartington/pen/azwojR

Ce que vous décrivez est causé par l'attribut menu-close.

http://ionicframework.com/docs/api/directive/menuClose/

Ainsi, lorsque vous naviguez via le menu latéral, les liens dotés de l'attribut de fermeture de menu effacent l'historique et empêchent l'affichage d'un bouton de retour.

Dans votre cas, vous naviguez via $state.go , qui n'a pas la logique fournie par menu-close.

Il faudrait donc en rajouter un peu.

$scope.goHome = function() {
  $state.go('app.playlists');
  $ionicHistory.nextViewOptions({
    historyRoot: true
  });
};
mhartington picture mhartington le 18 févr. 2015
👍6

merci @mhartington....
ça a résolu mon problème...

foram-patel picture foram-patel le 7 sept. 2016
Cette page vous a été utile?
0 / 5 - 0 notes

Questions connexes

aslamj picture aslamj  ·  3Commentaires
BilelKrichen picture BilelKrichen  ·  3Commentaires
masimplo picture masimplo  ·  3Commentaires
giammaleoni picture giammaleoni  ·  3Commentaires
GeorgeAnanthSoosai picture GeorgeAnanthSoosai  ·  3Commentaires