2015-01-12 10 views
9

Ich versuche, die Menü-Taste nicht zu zeigen, wenn die Zurück-Taste angezeigt wird. Gibt es eine Möglichkeit, Ionic dafür sorgen zu lassen? oder es liegt an mir?Ionic Nav-Back-Taste und Menü-Taste zeigen zusammen

zum Beispiel, wenn ich Ui-Sref verwenden, um von app.users zu app.users.add oder app.users.details zu gehen Ich erwarte die Menü-Taste ausgeblendet werden und die Zurück-Taste zu zeigen, aber sie sind beide zeige, wenn ich zu verschachtelten Ansichten gehe. Beispiel:

<button class="button button-positive" ui-sref="app.users.details({id:user.id})"> User details </button> 

app.js

.config(function($stateProvider, $urlRouterProvider) { 
$stateProvider 

    .state('app', { 
    url: '/app', 
    abstract: true, 
    templateUrl: 'templates/menu.html' 
    //controller: 'AppCtrl' 
    }) 

    .state('app.users', { 
    url: '/users', 

    views: { 
     '[email protected]' : { 
     controller: 'UsersCtrl', 
     templateUrl: 'templates/users.html' 
     } 
    } 
    }) 

    .state('app.users.add', { 
    url: '/addUsers', 

    views: { 
     '[email protected]' : { 
     controller: 'AddUserCtrl', 
     templateUrl: 'templates/add_user.html' 
     } 
    } 
    }) 

    .state('app.users.details', { 
    url: '/userDetails/:id', 

    views: { 
     '[email protected]' : { 
     controller: 'UserDetailsCtrl', 
     templateUrl: 'templates/details_user.html' 
     } 
    } 
    }) 
} 

menu.html

<ion-side-menus> 
    <ion-pane ion-side-menu-content> 
    <ion-nav-bar class="bar-stable"> 
     <ion-nav-back-button class="button-clear"> 
     <i class="icon ion-ios7-arrow-forward"></i> back 
     </ion-nav-back-button> 
    </ion-nav-bar> 
    <ion-nav-view name="menuContent" animation="slide-right-left"></ion-nav-view> 
    </ion-pane> 

    <ion-side-menu side="right"> 
    <header class="bar bar-header bar-stable"> 
     <h1 class="title">Title</h1> 
    </header> 
    <ion-content class="has-header"> 
     <ion-list> 

     <ion-item nav-clear menu-close ui-sref="app.users"> 
      Users 
     </ion-item> 

     <ion-item nav-clear menu-close ui-sref="app.users.add"> 
      New user 
     </ion-item> 

     </ion-list> 
    </ion-content> 
    </ion-side-menu> 
</ion-side-menus> 

Meine Ansichten Struktur ist als solche:

<ion-view title="Title"> 

    <ion-nav-buttons side="right"> 
    <button menu-toggle="right"class="button button-icon icon ion-navicon"></button> 
    </ion-nav-buttons> 

    <ion-content class="has-header"> 
    ... 
     View Content 
    ... 
    </ion-content> 
</ion-view> 

Antwort

16

Dies wird durch ionische standardmäßig erfolgt jetzt in der Beta 14. Du kannst das auch durch dieses Attribut umschalten bute.

<ion-side-menus enable-menu-with-back-views="false"> 

Relative Codepen Sidemenu Starter Project Sidemenu Docs

+0

Vielen Dank! es hat den Trick gemacht! – ohadbn

+3

Gibt es eine Möglichkeit, dieses Verhalten pro Ansicht zu überschreiben? – sebbo

4

ist auch möglich, dass von einem Kind Seite außer Kraft zu setzen Hinzufügen nur die Ionen Seite Menüs Richtlinie innerhalb des Kindes Vorlage:

<ion-side-menus enable-menu-with-back-views="true"></ion-side-menus> 
<ion-view view-title="My Child page"> 
    <ion-content> 
     <h1>HEY</h1> 
    </ion-content> 
</ion-view> 

Dies wird hinzufügen die vollständige Navigationsleiste (ion-nav-bar) innerhalb Ihrer Child-Seite, die in die menu.html-Vorlage eingefügt wurde (gemäß obigem Beispiel)

1

Platzieren Sie die Navigationsleiste mit der Menüschaltfläche auf der HTML-Seite, auf der Sie die Menüschaltfläche benötigen, und platzieren Sie die Navigationsleiste mit der Zurückschaltfläche auf der Seite, auf der Sie die Zurückschaltfläche benötigen.

Mag ich brauche Menü auf der Startseite so Ihren navbar auf der Homepage platzieren mit Menütaste

<ion-view title="home"> 
    <ion-nav-bar class="bar-stable main-header-nav home-page"> 
    <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-content></ion-content> 
</ion-view> 

Und ich muß zurück-Taste auf Seite Posteingang so navbar mit Backbutton auf Posteingang Seite verwendet

<ion-view title=""> 
    <ion-nav-bar class="bar-stable main-header-nav home-page"> 
    <ion-nav-back-button class="button-clear go-back"> 
     </ion-nav-back-button> 
    </ion-nav-bar> 
    <ion-content></ion-content> 
</ion-view> 
+0

arbeitete für mich. Vielen Dank –