2015-01-12 14 views
9

戻るボタンが表示されているときにメニューボタンを表示しないようにしようとしています。それを世話する方法がありますか?それとも私のことですか?イオンナビゲーションボタンとメニューボタンが一緒に表示される

たとえば、私がui-srefを使用してapp.usersからapp.users.addまたはapp.users.detailsに移動した場合、メニューボタンが非表示になり、戻るボタンが表示されます私が入れ子になったビューに行くときを示しています。例:

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

マイビューの構造は、次のような次のとおりです。

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

答えて

16

は、これはデフォルトで、イオンによって行われます今ベータ版14です。このattriでこれを切り替えることもできますブツ。

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

Relative Codepen Sidemenu Starter Project Sidemenu Docs

+0

受信トレイのページに戻るボタンとナビゲーションバーを使用して受信トレイのページ上のボタンをバック必要ありがとう!それはトリックをした! – ohadbn

+3

ビューごとにこの動作をオーバーライドする可能性はありますか? – sebbo

4

子ページからちょうど子テンプレート内のイオン側-メニューディレクティブを追加することを上書きすることも可能です:

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

これが追加されますmenu.htmlテンプレートに追加された子ページ内の完全なナビゲーションバー(イオンナビゲータバー)(上の例による)

1

メニューボタンを必要とするhtmlページにメニューボタン付きのnavbarを配置し、戻るボタンが必要なページに戻るボタン付きのnavbarを配置します。

私はホームページでメニューを必要とするこのよう

ので、メニューボタンをホームページにあなたのナビゲーションバーを配置

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

そして、私はそう

<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

が私のために働いた。ありがとう –

関連する問題