Question

我只需要在登录页面上删除侧边菜单。否则留下来。怎么做？在＃39; m中使用命令ionic ionic start myApp sidemenu来创建项目。

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>

Answer 1

您可以通过调用

随时在任何页面禁用/启用侧面菜单

<强> $ionicSideMenuDelegate.canDragContent(false)

e.g：

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

    $ionicSideMenuDelegate.canDragContent(false)

});

Answer 2

同样的问题。只需添加hide-nav-bar =＆＃34; true＆＃34;到离子视图

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

希望它有所帮助！

Answer 3

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

您可以做的是定义没有侧边菜单的登录页面。检查登录页面HTML模板。确保您没有<ion-side-menus>和<ion-side-menu>元素。这些用于需要侧面菜单的页面。

您的登录页面应如下所示：

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

Answer 5

我已经为这个问题做了一个小型演示。

<强> Plunker Demo

如果您希望页面与sidemenu不同，请创建一个新的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调用此状态。

Answer 6

游戏稍晚但这对于那些需要在side-menu布局中保持登录视图但需要隐藏侧面菜单按钮同时保留视图标题的人（像我一样）是另一种选择。

在login.html视图中，使用ion-header-bar指令创建带标题的新标题，然后通过{{1}隐藏ion-nav-bar布局中的side-menu } 标签。

示例（login.html）

ion-view

然后，如果您需要禁用任何拖动手势，请在控制器中执行此操作，例如@waqas建议。

Answer 7

我知道这已经很晚了，但这是一个快速而简单的解决方案。

在登录控制器

中添加此项

$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这里是我的完整代码。我希望这个Ex。为你工作。

Answer 9

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

Answer 10

您必须观看幻灯片菜单。如果它是打开的，你必须切换它并关闭。

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

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

                        }

                    });
    })

Answer 11

调用$ ionicSideMenuDelegate.canDragContent（false）会禁用滑动以访问菜单的功能，但不会隐藏导航栏中的汉堡包切换按钮（如果有的话）。要做到这一点，你可以在离子侧菜单内容元素中使用带有$ root绑定的ng-show，如下所示：

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

然后在您的登录控制器中：

$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

您也可以将其添加到主app控制器：

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

并在您不希望侧边菜单出现的每个控制器中将其切换为false：

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

add is-enabled =＆＃34; $ root.enableLeft＆＃34;到你的html标签和ng-show =＆＃34; $ root.showMenuIcon＆＃34;到html标签内的按钮。

Answer 13

基于每个人的各种答案和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);
    });
}

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>

这对我有用......

Answer 17

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

Ionic - 如何仅在登录页面上删除sidemenu？

17 个答案: