Nút điều hướng và nút menu Ionic hiển thị cùng nhau

Question

Tôi cố gắng làm cho nút menu không hiển thị khi nút quay lại hiển thị. có cách nào để Ionic chăm sóc điều đó không? hay tùy thuộc vào tôi?

ví dụ: nếu tôi sử dụng ui-sref để chuyển từ app.users sang app.users.add hoặc app.users.details tôi mong đợi nút menu sẽ bị ẩn và nút quay lại hiển thị, nhưng cả hai hiển thị khi tôi chuyển đến chế độ xem lồng nhau. Ví dụ:

<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: { 
     'menuContent@app' : { 
     controller: 'UsersCtrl', 
     templateUrl: 'templates/users.html' 
     } 
    } 
    }) 

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

    views: { 
     'menuContent@app' : { 
     controller: 'AddUserCtrl', 
     templateUrl: 'templates/add_user.html' 
     } 
    } 
    }) 

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

    views: { 
     'menuContent@app' : { 
     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> 

My cấu trúc quan điểm là như vậy:

<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> 

Answer 1

này được thực hiện bằng ion theo mặc định bây giờ trong phiên bản beta 14. Bạn cũng có thể chuyển đổi điều này bằng attri này bute.

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

Relative Codepen Sidemenu Starter Project Sidemenu Docs

Answer 2

cũng có thể ghi đè lên đó từ một trang con chỉ cần thêm các chỉ thị ion-side-menu bên trong mẫu trẻ:

<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> 

này sẽ thêm thanh điều hướng hoàn chỉnh (ion-nav-bar) bên trong trang con bạn đã được thêm vào mẫu menu.html (theo ví dụ trên)

Answer 3

Đặt thanh điều hướng bằng nút menu trên trang html mà bạn cần nút menu và đặt thanh điều hướng bằng nút quay lại trên trang mà bạn cần nút quay lại.

Như thế này tôi cần đơn Trên trang nhà để đặt thanh điều hướng trên trang chủ với nút menu

<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> 

Và tôi cần trở lại nút trên trang Inbox để sử dụng thanh điều hướng với backbutton trên trang hộp thư

<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>