Ionic-framework: Sidemenu-Vorlage, ion-nav-back-button, ion-navicon und $state.go('/app/playlists');

Erstellt am 4. Jan. 2015 · 3Kommentare · Quelle: ionic-team/ionic-framework

Die Seitenmenüvorlage hat mehrere verschachtelte Zustände, die in app.js definiert sind. Wenn Sie zu einem verschachtelten Zustand (zB 'app.single') navigieren, wird die ion-Nav-Leiste mit einem '< Zurück'-Button aktualisiert.

Wenn Sie zur 'Homepage' ('/app/playlists') zurückkehren, wird der Zurück-Button durch ein ion-navicon ersetzt (siehe menu.html). Sie können auch zur Startseite (playlists.html) wechseln, indem Sie einem Controller eine einfache Funktion hinzufügen:

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

Wenn Sie eine weitere Ebene des verschachtelten Zustands hinzufügen:

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

Und rufen Sie die goHome()-Funktion vom View-Controller auf, den Sie zur Startseite wechseln, aber die Zurück-Schaltfläche wird NICHT durch das ion-navicon ersetzt?

Dies ist auch der Fall, wenn Sie von einer Ansicht zu einer anderen navigieren und dann zurück zur 'Startseite':

http://localhost :8100/#/app/playlists (ion-nav-bar hat ion-navicon)
http://localhost :8100/#/app/playlists/1 (ion-nav-bar hat die Schaltfläche '< Zurück')
http://localhost :8100/#/app/playlists/2 (ion-nav-bar hat die Schaltfläche '< Zurück')
http://localhost :8100/#/app/playlists (ion-nav-bar hat die Schaltfläche '< Zurück', sollte aber ion-navicon haben)

Quelle

RobFerguson

Hilfreichster Kommentar

Also, was Sie beschreiben und das Markup ist tatsächlich richtig.

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

Was Sie beschreiben, wird durch das Attribut menu-close verursacht.

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

Wenn Sie also über das Seitenmenü navigieren, löschen Links mit dem Attribut Menü schließen den Verlauf und verhindern, dass eine Zurück-Schaltfläche angezeigt wird.

In Ihrem Fall navigieren Sie über $state.go , was nicht die Logik hat, die menu-close bietet.

Sie müssten also etwas hinzufügen.

$scope.goHome = function() {
  $state.go('app.playlists');
  $ionicHistory.nextViewOptions({
    historyRoot: true
  });
};

mhartington am 18. Feb. 2015

👍6

Alle 3 Kommentare

In der menu.html der Seitenmenü-Vorlage:

<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 müssen ein direkter Nachkomme von ion-nav-view NICHT ion-nav-bar sein.

Aktualisierte menu.html:

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

und aktualisierte playlists.html:

<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 am 5. Jan. 2015

Also, was Sie beschreiben und das Markup ist tatsächlich richtig.

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

Was Sie beschreiben, wird durch das Attribut menu-close verursacht.

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

Wenn Sie also über das Seitenmenü navigieren, löschen Links mit dem Attribut Menü schließen den Verlauf und verhindern, dass eine Zurück-Schaltfläche angezeigt wird.

In Ihrem Fall navigieren Sie über $state.go , was nicht die Logik hat, die menu-close bietet.

Sie müssten also etwas hinzufügen.

$scope.goHome = function() {
  $state.go('app.playlists');
  $ionicHistory.nextViewOptions({
    historyRoot: true
  });
};

mhartington am 18. Feb. 2015

👍6

danke @mhartington....
es hat mein Problem gelöst...

foram-patel am 7. Sept. 2016

War diese Seite hilfreich?

0 / 5 - 0 Bewertungen

Ionic-framework: Sidemenu-Vorlage, ion-nav-back-button, ion-navicon und $state.go('/app/playlists');

Hilfreichster Kommentar

Alle 3 Kommentare

Verwandte Themen