Ionic - How to remove sidemenu on login page only?

2019-01-22 01:19发布

站内文章 / 前端开发

127 0

冷血范

女 | 书童

私信

可以将文章内容翻译成中文,广告屏蔽插件可能会导致该功能失效(如失效，请关闭广告屏蔽插件后再试):

问题:

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

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

回答1:

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

$ionicSideMenuDelegate.canDragContent(false)

e.g:

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

    $ionicSideMenuDelegate.canDragContent(false)

});

回答2:

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

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

Hope it helps!

回答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 )
   }
}

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

回答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.

回答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.

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

回答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.

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

回答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();

                        }

                    });
    })

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

回答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.

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

回答14:

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

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

}

回答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 ...