离子 – 如何删除login页面上的sidemenu只?
我只需要在我的login页面上删除sidemenu。 否则保持。 如何做到这一点? 我正在使用命令离子ionic start myApp sidemenu
来创build项目。
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" } } })
login页面
<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>
您可以随时通过调用禁用/启用侧边菜单
$ionicSideMenuDelegate.canDragContent(false)
例如:
angular.module('ABC').controller('xyzCtrl', function($scope, $ionicSideMenuDelegate) { $ionicSideMenuDelegate.canDragContent(false) });
这里同样的问题。 只需在离子视图中添加hide-nav-bar =“true”即可
<ion-view hide-nav-bar="true">
希望能帮助到你!
你可以做的是定义login页面没有sidemenu。 检查您的login页面的HTML模板。 确保您没有<ion-side-menu>
和<ion-side-menu>
元素。 这些用在需要有侧边菜单的页面上。
您的login页面应如下所示:
<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>
有点迟到游戏,但这是另一种select(如我)谁需要保持在side-menu
布局的login视图,但需要隐藏的侧面菜单button,同时保持视图的标题。
在login.html
视图中,使用ion-header-bar
指令创build一个带有标题的新标题,然后通过ion-view
标签隐藏side-menu
布局中的ion-nav-bar
。
示例(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所示。
我已经为这个问题做了一个小的演示。
Plunker演示
如果你想要一个页面不同于sidemenu。创build一个新的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
来调用这个状态。
离子2
import { MenuController } from 'ionic-angular'; export class LoginPage { constructor(public menuCtrl: MenuController) { } ionViewWillEnter() { this.menuCtrl.swipeEnable( false ) } ionViewDidLeave() { this.menuCtrl.swipeEnable( true ) } }
我知道这是迟到,但这是一个快速和简单的解决scheme。
将其添加到您的login控制器
$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>
BCN
<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's 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
你必须看滑动菜单。 如果打开,则必须将其切换并closures。
.controller('kayTOlCtrl', function($scope,$ionicSideMenuDelegate) { // $scope.$watch(function () { return $ionicSideMenuDelegate.getOpenRatio(); }, function (ratio) { if (ratio != 0) { $ionicSideMenuDelegate.toggleRight(); } }); })
调用$ ionicSideMenuDelegate.canDragContent(false)会禁用滑动function来访问菜单,但不会隐藏导航栏中的汉堡切换button(如果有的话)。 要做到这一点,你可以在你的ion-side-menu-content元素中使用ng-show和$ root绑定,如下所示:
<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>
然后在你的login控制器中:
$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;
在html标签中添加is-enabled =“$ root.enableLeft”到你的html标签和ng-show =“$ root.showMenuIcon”。
基于大家的各种答案和15分钟的尝试,这里是我的工作示例,它应该只是做复制粘贴
你的观点,像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>
这是我的作品…
我认为最简单的方法是在模式视图中打开login页面,签出$ ionicModal