Question

我目前正在使用Ionic Framework开发应用程序，我遇到了以下问题：

在应用程序的每个页面中都应该有一个左侧菜单。只有一页（＆＃39;事件＆＃39;），右边应该有另一个侧边菜单。现在一切正常，直到我访问了＆＃39;事件＆＃39; -page一次：从每一页的那一点开始，当向左滑动时显示一个空的右侧菜单 - 当然，它不应该在那里

由于我不确定我是否能够很好地解释这种行为，因此我快速编写了一个代码，让您查看应用和我的完整code。

谢谢！

这里有重要的代码片段：

的index.html：

<body ng-controller="MainCtrl" ng-app="ionicApp">

  <ion-side-menus>
    <!--- NAV-MENU LEFT --->
    <ion-side-menu side="left">[...]</ion-side-menu>

    <!--- EVENTS-MENU RIGHT --->
    <ion-side-menu side="right" ng-if="showRightMenu">[...]</ion-side-menu>

    <ion-side-menu-content>

      <!--- HEADER --->
      <ion-nav-bar class="bar bar-header bar-positive">
        <ion-nav-buttons side="left">
          <button class="button button-clear icon ion-navicon" menu-toggle="left"></button>
        </ion-nav-buttons>
        <ion-nav-buttons side="right">
          <button class="button button-clear icon ion-gear-a" ng-if="showRightMenu" menu-toggle="right"></button>
        </ion-nav-buttons>
      </ion-nav-bar>

      <ion-nav-view></ion-nav-view>
    </ion-side-menu-content>

  </ion-side-menus>

  <script id="home.html" type="text/ng-template">[...]</script>
  <script id="events.html" type="text/ng-template">[...]</script>

</body>

app.js：

var app = angular.module('ionicApp', ['ionic', 'ionicApp.controllers']);

app.config(function($stateProvider, $urlRouterProvider) {
  $stateProvider
    .state('home', {
      url: '/',
      templateUrl: 'home.html'
    })
    .state('events', {
      url: '/events',
      templateUrl: 'events.html'
    });
  $urlRouterProvider.otherwise('/');
});

[...]

app.controller('MainCtrl', function($scope, $state, $rootScope) {
  [...]

  //set ng-if-variable for the right side menu
  $rootScope.$on('$stateChangeSuccess',
    function(event, toState, toParams, fromState, fromParams) {
      if (toState.name == 'events') {
        $scope.showRightMenu = true;
      } else {
        $scope.showRightMenu = false;
      }

      //console.log($scope.showRightMenu);
    })

  function ContentController($scope, $ionicSideMenuDelegate) {
    $scope.toggleLeft = function() {
      $ionicSideMenuDelegate.toggleLeft();
    };
    $scope.toggleRight = function() {
      $ionicSideMenuDelegate.toggleLeft();
    };
  }
});

[...]

Answer 1

我遇到了同样的问题，这是我找到解决问题的最好方法。

首先，我的菜单有两个模板，一个标准，一个包含正确的菜单。

标准（仅限左）：

<ion-side-menus enable-menu-with-back-views="false" class="dark">
  <ion-side-menu-content>
    <ion-nav-bar class="bar-stable">
      <ion-nav-back-button>
      </ion-nav-back-button>
      <ion-nav-buttons side="left">
        <button class="button button-icon button-clear ion-navicon" menu-toggle="left">
        </button>
      </ion-nav-buttons>
    </ion-nav-bar>
    <ion-nav-view name="menuContent"></ion-nav-view>
  </ion-side-menu-content>

  <ion-side-menu side="left">
    <ion-content> 
    </ion-content>
  </ion-side-menu>

</ion-side-menus>

右侧菜单：

<ion-side-menus enable-menu-with-back-views="false" class="dark">
  <ion-side-menu-content>
    <ion-nav-bar class="bar-stable">
      <ion-nav-back-button>
      </ion-nav-back-button>
      <ion-nav-buttons side="left">
        <button class="button button-icon button-clear ion-navicon" menu-toggle="left">
        </button>
      </ion-nav-buttons>
      <ion-nav-buttons side="right">
        <button class="button button-icon button-clear ion-navicon" menu-toggle="right">
        </button>
      </ion-nav-buttons>
    </ion-nav-bar>
    <ion-nav-view name="menuContent"></ion-nav-view>
  </ion-side-menu-content>

  <ion-side-menu side="left"> 
  </ion-side-menu>

  <ion-side-menu side="right"> 
  </ion-side-menu>
</ion-side-menus>

剩下的魔法发生在您的路由设置中，为每个菜单定义一条抽象路线，然后根据需要应用于您的路线：

  $stateProvider
    .state('app', {
      url: '/app',
      abstract: true,
      templateUrl: 'templates/menu.html',
      controller: 'AppCtrl',
    })
    .state('app-right', {
      url: '/app',
      abstract: true,
      templateUrl: 'templates/rightMenu.html',
      controller: 'AppCtrl',
    })
    .state('app-right.settings', {
      url: '/settings',
      views: {
        'menuContent': {
          templateUrl: 'templates/settings.html'
        }
      }
    })
    .state('app.about', {
      url: '/about',
      views: {
        'menuContent': {
          templateUrl: 'templates/about.html'
        }
      }
    })

Answer 2

在mainCtrl中，您必须放置一些条件，例如您不想显示左侧菜单的位置。

在下面的代码行中给出ng-hide =＆＃34;＆＃34;并从mainCtrl

中使此变量为true或false

<ion-nav-buttons side="left">
          <button class="button button-clear icon ion-navicon" menu-toggle="left"></button>
</ion-nav-buttons>

Answer 3

您应该使用is-enabled属性而不是ng-if。这也会影响滑动。

<ion-side-menu is-enabled="showRightMenu" side="right"></ion-side-menu>

请参阅http://ionicframework.com/docs/api/directive/ionSideMenu/

上的文档

离子侧菜单 - 仅在一页上

3 个答案: