Ionic - How to remove sidemenu on login page only?

Question

I need to remove sidemenu only on my login page. Otherwise remain. How it can be done? I'm using command ionic ionic start myApp sidemenu to create the project.

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 page

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

Answer 1

You can disable/enable sidemenu at any time at any page by calling

$ionicSideMenuDelegate.canDragContent(false)

eg:

angular.module('ABC').controller('xyzCtrl', function($scope, $ionicSideMenuDelegate) {

    $ionicSideMenuDelegate.canDragContent(false)

});

Answer 2

same issue here. just add hide-nav-bar="true" to the ion-view

<ion-view hide-nav-bar="true">

Hope it helps!

Answer 3

Ionic 2

import { MenuController } from 'ionic-angular';

export class LoginPage {

   constructor(public menuCtrl: MenuController) {

   }

   ionViewWillEnter() {

       this.menuCtrl.swipeEnable( false )
   }

   ionViewDidLeave() {

       this.menuCtrl.swipeEnable( true )
   }
}

Answer 4

What you can do is define the login page without a sidemenu. Check your login page HTML template. Make sure you do not have the <ion-side-menus> and <ion-side-menu> elements in it. These are used on pages that need to have a sidemenu.

Your login page should look like this:

<ion-view>
  <ion-content>
     <!--your page content goes in here-->
   </ion-content>
</ion-view>

To have sidemenu on other pages, just put the sidemenu content in a parent state which in your code is the app state.

Your menu.html file:

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

Answer 5

A little late to the game but this is another option for those (like me) who need to keep their login view within the side-menu layout but need to hide the side menu button while keeping the view title.

Inside the login.html view use the ion-header-bar directive to create a new header with a title and then hide the ion-nav-bar in the side-menu layout via the ion-view tag.

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

Then if you need to disable any drag gestures do so in the controller like @waqas suggests.

Answer 6

I have made a small demo for the question.

Plunker Demo

If you want a page differently from sidemenu.Create a new Parent state . For example

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

Then call this state using /landing when ever you want.

Answer 7

I know this is late but here is a quick and easy solution.

Add this in your login Controller

$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);
});

Answer 8

<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 here's my full code. I hope this Ex. work for you.

Answer 9

// index.html
<body>
  <section ui-view></section>
</body>

// routes.js
$stateProvider
  .state('login', {
    url: '/login',
    templateUrl: 'templates/login.html'
  })

$urlRouterProvider.otherwise('/login')

it's work, see more here: angular-ui/ui-router

Answer 10

You have to watch the slide menu. If it is open, you have to toggle it and close.

 .controller('kayTOlCtrl', function($scope,$ionicSideMenuDelegate) {
     //
     $scope.$watch(function () {
            return $ionicSideMenuDelegate.getOpenRatio();
        },

                    function (ratio) {
                        if (ratio != 0) {
                          $ionicSideMenuDelegate.toggleRight();

                        }

                    });
    })

Answer 11

Calling $ionicSideMenuDelegate.canDragContent(false) does disable the ability to swipe to access the menu, but does not hide the hamburger toggle button in the navbar (if you have one). To do that, you can use ng-show with $root binding in your ion-side-menu-content element like this:

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

Then in your login controller:

$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);
});

Answer 12

you can also add this to your main app controller:

$scope.$root.enableLeft = true;
$scope.$root.showMenuIcon = true;

and simply switch it to false in every controller you dont want your side menu appear in:

$scope.$root.enableLeft = false;
$scope.$root.showMenuIcon = false;

add is-enabled="$root.enableLeft" to your html tag and ng-show="$root.showMenuIcon" to the button inside html tag.

Answer 13

Based on various answers here from everyone and 15 minutes of trying, here is my working example of it, and it should work as simply doing copy-paste

Your view, like 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>

Your related controller, like 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);
    });
}

Answer 14

.state('login', {
        url: '/login',
        controller: 'LoginCtrl',
        templateUrl: 'templates/loginpage.html'
    })
.state('app.account', {
        url: '/account',
        views: {
            'menuContent': {
                templateUrl: 'templates/account.html',
                controller: 'AccountCtrl'
            }
        }
    })

Answer 15

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);
  }

}

Answer 16

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

This is works for me ...

Answer 17

我认为在模态视图中打开登录页面的最简单的解决方案是checkout $ ionicModal