Ionic nav-back-кнопка и кнопка меню отображаются вместе
Я пытаюсь сделать кнопку "меню" не показывать, когда кнопка назад показывает. есть ли способ позволить Ionic позаботиться об этом? или это зависит от меня?
например, если я использую пользовательский интерфейс-сref выходить из приложения.пользователи приложения.пользователи.добавить или приложение.пользователи.детали я ожидаю, что кнопка меню будет скрыта, а кнопка "Назад" будет отображаться, но они оба отображаются, когда я перехожу к вложенным представлениям. пример:
<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'
}
}
})
}
.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>
3 ответов
это делается ionic по умолчанию теперь в beta 14. Вы также можете переключить его с помощью этого атрибута.
<ion-side-menus enable-menu-with-back-views="false">
Относительный Codepen Sidemenu Стартовый Проект Sidemenu Docs
также можно переопределить это с дочерней страницы, просто добавив директиву Ion-side-menus внутри дочернего шаблона:
<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>
это добавит полную панель навигации (ion-nav-bar) внутри вашей дочерней страницы, которая была добавлена в меню.HTML шаблон (в соответствии с приведенным выше примером)
поместите navbar с кнопкой Меню на 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>
и мне нужна кнопка "назад" на странице "входящие", поэтому используйте navbar с кнопкой "назад" на странице "входящие"
<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>