Мне нужно удалить sidemenu только на моей странице входа. Иначе останутся. Как это можно сделать? Я использую команду ionic ionic start myApp sidemenu для создания проекта.
app.js
.config(function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('login', {
url: "/login",
templateUrl: "templates/login.html",
controller: 'LoginCtrl'
})
.state('app', {
url: "/app",
abstract: true,
templateUrl: "templates/menu.html",
controller: 'AppCtrl'
})
.state('app.search', {
url: "/search",
views: {
'menuContent' :{
templateUrl: "templates/search.html"
}
}
})
страница входа в систему
<ion-view title="Login">
<ion-content>
<div class="list">
<label class="item">
<button class="button button-block button-positive" type="submit" ng-click="login()">Log in</button>
</label>
</div>
</ion-content>
</div>
Вы можете отключить/включить sidemenu в любой момент на любой странице, вызвав
$ionicSideMenuDelegate.canDragContent(false)
например:
angular.module('ABC').controller('xyzCtrl', function($scope, $ionicSideMenuDelegate) {
$ionicSideMenuDelegate.canDragContent(false)
});
такой же вопрос здесь. просто добавьте hide-nav-bar = "true" в ионный просмотр
<ion-view hide-nav-bar="true">
Надеюсь, что это поможет!
**Ionic 2**
import { MenuController } from 'ionic-angular';
export class LoginPage {
constructor(public menuCtrl: MenuController) {
}
ionViewWillEnter() {
this.menuCtrl.swipeEnable( false )
}
ionViewDidLeave() {
this.menuCtrl.swipeEnable( true )
}
}
IONIC 4: Sept2019
try this code to in your login.page.ts
Step1: import { MenuController } from '@ionic/angular';
Step2: constructor(public menuCtrl: MenuController) { }
(below constructo)
Step3: ionViewWillEnter() {
this.menuCtrl.enable(false);
}
ionViewDidLeave() {
this.menuCtrl.enable(true);
}
this code will help you to work with side menu flawlessly on any screen, if you login & re-login and try it will work now.
Что вы можете сделать, это определить страницу входа без sidemenu. Проверьте свой HTML-шаблон своей страницы входа в систему. Убедитесь, что в нем нет элементов <ion-side-menus> и <ion-side-menu>. Они используются на страницах, которые должны иметь sidemenu.
Ваша страница входа должна выглядеть так:
<ion-view>
<ion-content>
<!--your page content goes in here-->
</ion-content>
</ion-view>
Чтобы иметь sidemenu на других страницах, просто поместите содержимое sidemenu в родительское состояние, которое в вашем коде является состоянием app.
Ваш файл menu.html:
<ion-view>
<ion-side-menus>
<ion-side-menu>
<!--put your side menu content here-->
<!--any child state of app will inherit this sidemenu-->
</ion-side-menu>
<ion-side-menu-content>
<ion-nav-view name="menuContent"></ion-nav-view>
</ion-side-menu-content>
</ion-side-menus>
</ion-view>
Немного поздно в игре, но это еще один вариант для тех, кто (как и я), которым нужно оставить свой вид входа в макете side-menu, но нужно скрыть кнопку бокового меню, сохранив заголовок представления.
Внутри представления login.html используйте директиву ion-header-bar, чтобы создать новый заголовок с заголовком, а затем скрыть тег ion-nav-bar в макете side-menu с помощью тега ion-view.
Пример (login.html)
<ion-header-bar class="bar-positive" align-title="center">
<h1 class="title">Login</h1>
</ion-header-bar>
<ion-view hide-nav-bar="true">
<!-- Login content goes here -->
</ion-view>
Затем, если вам нужно отключить любые жесты перетаскивания, сделайте это в контроллере, как предлагает @waqas.
Я сделал небольшую демонстрацию для вопроса.
Если вы хотите, чтобы страница отличалась от sidemenu. Создайте новый Parent state.
Например
$stateProvider
.state('landing', {
url: '/landing',
controller: 'landingCtrl',
templateUrl: 'landing.html'
});
Html:
<ion-view class="view-bg-blue" >
<ion-nav-buttons side="left">
<button class="button button-icon button-clear ion-navicon" ng-click="openMenu()"></button>
</ion-nav-buttons>
<ion-content padding="true">
<h3 class="text-center">Welcome To Landing Page</h3>
<div class="row">
<div class="col">
<div class="text-center">
<h4>My App</h4>
<div class="row">
<div class="col">
<input placeholder="User">
</div>
</div>
<div class="row">
<div class="col">
<input placeholder="password">
</div>
</div>
<a class="button icon-right ion-chevron-right button-calm" ng-click="open()">Login</a>
</div>
</div>
</div>
</ion-content>
</ion-view>
Затем вызовите это состояние, используя /landing, когда захотите.
Я знаю, что это поздно, но вот быстрое и простое решение.
Добавьте это в свой контроллер входа
$scope.$on('$ionicView.afterEnter', function(event) {
$ionicSideMenuDelegate.canDragContent(false);
});
//enable side menu drag before moving to next view
$scope.$on('$ionicView.beforeLeave', function(event) {
$ionicSideMenuDelegate.canDragContent(true);
});
<ion-side-menus>
барселона
<ion-tab title="ALL" href="#/dashbord/all" class="bgorange">
<ion-nav-view name="all"></ion-nav-view>
</ion-tab>
<ion-tab title="INFO" class="bgorange" href="#/dashbord/info">
<ion-nav-view name="info"></ion-nav-view>
</ion-tab>
<ion-tab title="EVENTS" class="bgorange" href="#/dashbord/events">
<ion-nav-view name="events"></ion-nav-view>
</ion-tab>
</ion-tabs>
<ion-nav-view></ion-nav-view>
</ion-pane>
<div ng-include src="calender.html"></div>
<ion-side-menu side="left">
<ion-content has-header="true">
<ion-list>
<ion-item menu-close class="item-icon-left bottombordernone" href="#/dashbord">
<i class="icon ion-home"></i>
What New
</ion-item>
<ion-item menu-close class="item-icon-left bottombordernone">
<i class="icon ion-chatbox-working"></i>
Feedback
</ion-item>
<ion-item menu-close class="item-icon-left bottombordernone" ng-click="logout()">
<i class="icon ion-power"></i>
Logout
</ion-item>
</ion-list>
</ion-content>
</ion-side-menu>
@Zulu вот мой полный код. Я надеюсь, что этот Исх. работа для вас.
// index.html
<body>
<section ui-view></section>
</body>
// routes.js
$stateProvider
.state('login', {
url: '/login',
templateUrl: 'templates/login.html'
})
$urlRouterProvider.otherwise('/login')
он работает, см. больше здесь: angular -ui/ui-router
Вам нужно посмотреть меню слайдов. Если он открыт, вам нужно переключить его и закрыть.
.controller('kayTOlCtrl', function($scope,$ionicSideMenuDelegate) {
//
$scope.$watch(function () {
return $ionicSideMenuDelegate.getOpenRatio();
},
function (ratio) {
if (ratio != 0) {
$ionicSideMenuDelegate.toggleRight();
}
});
})
Вызов $ionicSideMenuDelegate.canDragContent(false) отключает возможность прокрутки для доступа к меню, но не скрывает кнопку переключения гамбургера на навигационной панели (если она у вас есть). Для этого вы можете использовать ng-show с привязкой $root в вашем элементе содержимого i-i-menu-content следующим образом:
<ion-nav-buttons side="left">
<button class="button button-icon button-clear ion-navicon" menu-toggle="left"
ng-show="$root.showMenuIcon">
</button>
</ion-nav-buttons>
Затем в вашем контроллере входа:
$scope.$on('$ionicView.beforeEnter', function (event) {
$scope.$root.showMenuIcon = false;
$ionicSideMenuDelegate.canDragContent(false);
});
$scope.$on('$ionicView.beforeLeave', function (event) {
$scope.$root.showMenuIcon = true;
$ionicSideMenuDelegate.canDragContent(true);
});
вы также можете добавить это в свой основной контроллер приложения:
$scope.$root.enableLeft = true;
$scope.$root.showMenuIcon = true;
и просто переключите его на false в каждом контроллере, в котором вы не хотите, чтобы появилось ваше боковое меню:
$scope.$root.enableLeft = false;
$scope.$root.showMenuIcon = false;
Добавить is-enabled = "$ root.enableLeft" в ваш html-тег и ng-show = "$ root.showMenuIcon" на кнопку внутри тега html.
Основываясь на различных ответах здесь от всех и на 15 минут попытки, вот мой рабочий пример, и он должен работать, как просто делать copy-paste
Ваше мнение, например login.html
<ion-view hide-nav-bar="true">
<ion-header-bar class="bar-light title-image" align-title="center">
<h1 class="title">Title</h1>
</ion-header-bar>
<ion-content>
</ion-content>
</ion-view>
Соответствующий контроллер, например LoginCtrl
function LoginCtrl($scope, $ionicSideMenuDelegate) {
$scope.$on('$ionicView.afterEnter', function(event) {
$ionicSideMenuDelegate.canDragContent(false);
});
//enable side menu drag before moving to next view
$scope.$on('$ionicView.beforeLeave', function(event) {
$ionicSideMenuDelegate.canDragContent(true);
});
}
.state('login', {
url: '/login',
controller: 'LoginCtrl',
templateUrl: 'templates/loginpage.html'
})
.state('app.account', {
url: '/account',
views: {
'menuContent': {
templateUrl: 'templates/account.html',
controller: 'AccountCtrl'
}
}
})
import {IonicApp, Page, NavController, MenuController} from 'ionic/ionic';
import {TabsPage} from '../tabs/tabs';
import {SignupPage} from '../signup/signup';
import {UserData} from '../../providers/user-data';
@Page({
templateUrl: 'build/pages/login/login.html'
})
export class LoginPage {
constructor(nav: NavController, userData: UserData, menu: MenuController) {
this.nav = nav;
this.userData = userData;
this.login = {};
this.submitted = false;
this.menu = menu;
}
onLogin(form) {
this.submitted = true;
if (form.valid) {
this.userData.login();
this.nav.push(TabsPage);
}
}
onSignup() {
this.nav.push(SignupPage);
}
onPageDidEnter() {
// the left menu should be disabled on the login page
this.menu.enable(false);
}
onPageDidLeave() {
// enable the left menu when leaving the login page
this.menu.enable(true);
}
}
<ion-pane ion-side-menu-content drag-content="false">
<ion-header-bar class="bar-dark">
<h1 class="title">Cards</h1>
</ion-header-bar>
<ion-content scroll="true">
</ion-content>
</ion-pane>
Это работает для меня...
Я думаю, что самое простое решение при открытии страницы входа в модальном виде, проверка $ionicModal