Ionic - How to remove sidemenu on login page only?

前端未结

关注

 17  2629

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

相关标签:

17条回答

渐次进展

2020-12-08 10:06

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

}

0 讨论(0)

伪装坚强ぢ

2020-12-08 10:07
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.
0 讨论(0)
发布评论:

提交评论
- 加载中...

广开言路

2020-12-08 10:09

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.

0 讨论(0)

难免孤独

2020-12-08 10:12
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>
     
   </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>
      
      
    </ion-side-menu>

   <ion-side-menu-content>
      <ion-nav-view name="menuContent"></ion-nav-view>
   </ion-side-menu-content>
  </ion-side-menus>
</ion-view>
```
0 讨论(0)
发布评论:

提交评论
- 加载中...

梦毁少年i

2020-12-08 10:12

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

0 讨论(0)

面向向阳花

2020-12-08 10:14

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

0 讨论(0)