web-dev-qa-db-fra.com

Ionic - Comment supprimer le menu latéral sur la page de connexion uniquement?

Je dois supprimer sidemenu uniquement sur ma page de connexion. Sinon restez. Comment cela peut-il être fait? J'utilise la commande ionic ionic start myApp sidemenu pour créer le projet.

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

page de connexion

<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>
angularjsionic-framework
39
Mohammad Nurdin

Vous pouvez désactiver/activer le menu secondaire à tout moment et à n'importe quelle page en appelant

$ionicSideMenuDelegate.canDragContent(false)

par exemple:

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

    $ionicSideMenuDelegate.canDragContent(false)

});
52
waqas

même problème ici. ajoutez simplement hide-nav-bar = "true" à la vue d'ions

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

J'espère que ça aide!

12
Braian Mellor

Ionic 2 

import { MenuController } from 'ionic-angular';

export class LoginPage {

   constructor(public menuCtrl: MenuController) {

   }

   ionViewWillEnter() {

       this.menuCtrl.swipeEnable( false )
   }

   ionViewDidLeave() {

       this.menuCtrl.swipeEnable( true )
   }
}
11
Luckylooke

Ce que vous pouvez faire est de définir la page de connexion sans menu secondaire. Vérifiez votre modèle HTML de page de connexion. Assurez-vous de ne pas avoir les éléments <ion-side-menus> et <ion-side-menu>. Ceux-ci sont utilisés sur les pages nécessitant un menu secondaire. 

Votre page de connexion devrait ressembler à ceci:

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

Pour avoir le menu secondaire sur d'autres pages, il suffit de placer le contenu du menu secondaire dans un état parent qui, dans votre code, est l'état app.

Votre fichier 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>
9
Akinkunle Allen

J'ai fait une petite démo pour la question.

Démo Plunker

Si vous voulez une page différente de sidemenu.Créez un nouveau Parent state. Par exemple

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

Appelez ensuite cet état en utilisant /landing quand vous le souhaitez.

5
Muhsin

Un peu tard dans le jeu, mais ceci est une autre option pour ceux (comme moi) qui doivent conserver leur vue de connexion dans la disposition side-menu mais qui doivent masquer le bouton du menu latéral tout en conservant le titre de la vue. 

Dans la vue login.html, utilisez la directive ion-header-bar pour créer un nouvel en-tête avec un titre, puis masquez le ion-nav-bar dans la présentation side-menu via la balise ion-view. 

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

Ensuite, si vous devez désactiver les mouvements de glisser, faites-le dans le contrôleur, comme le suggère @waqas.

5
Will.Harris

Je sais que c'est tard, mais voici une solution rapide et facile.

Ajoutez ceci dans votre contrôleur de connexion

$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);
});
3
LeRoy
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
Yasura Dissanayaka

Vous devez regarder le menu des diapositives . S'il est ouvert, vous devez l'activer et le fermer.

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

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

                        }

                    });
    })
0
Burak Karatepe

vous pouvez également ajouter ceci à votre contrôleur principal de l'application:

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

et passez simplement à false dans chaque contrôleur dont vous ne voulez pas que votre menu latéral apparaisse dans:

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

add is-enabled = "$ root.enableLeft" à votre balise HTML et ng-show = "$ root.showMenuIcon" au bouton situé à l'intérieur de la balise html.

0
Niloo
<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 voici mon code complet . J'espère que cet Ex. travailler pour vous. 

0
Chetan Buddh
// index.html
<body>
  <section ui-view></section>
</body>

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

$urlRouterProvider.otherwise('/login')

c'est du travail, voir plus ici: angular-ui/ui-router

0
vuhung3990

Sur la base des différentes réponses de chacun et de 15 minutes d’essais, voici mon exemple de travail, et cela devrait fonctionner comme un simple copier-coller

Votre vue, comme 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>

Votre contrôleur associé, comme 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);
    });
}
0
Marko
.state('login', {
        url: '/login',
        controller: 'LoginCtrl',
        templateUrl: 'templates/loginpage.html'
    })
.state('app.account', {
        url: '/account',
        views: {
            'menuContent': {
                templateUrl: 'templates/account.html',
                controller: 'AccountCtrl'
            }
        }
    })
0
Sarathi S

L'appel de $ ionicSideMenuDelegate.canDragContent (false) désactive la possibilité de glisser pour accéder au menu, mais ne masque pas le bouton bascule hamburger dans la barre de navigation (le cas échéant). Pour ce faire, vous pouvez utiliser ng-show avec $ root binding dans votre élément contenu dans ion-side-menu-menu comme ceci:

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

Puis dans votre contrôleur de connexion:

$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);
});
0
Mr. Bungle