离子侧边菜单 - 仅在一页上答案

【问题标题】：Ionic Side Menu - only on one Page离子侧边菜单 - 仅在一页上
【发布时间】：2016-01-25 19:58:07
【问题描述】：

我目前正在使用 Ionic 框架开发一个应用程序，但遇到了以下问题：

在应用程序的每个页面中，都应该有一个可用的左侧菜单。在只有一个页面（“事件”）中，右侧应该有另一个侧边菜单。现在一切正常，直到我访问了一次“事件”页面：从那时起，当向左滑动时，每个页面上都会显示一个空白的右侧菜单 - 当然，它不应该在那里。

由于我不确定我是否足够好地解释了这种行为，所以我制作了一个快速的 codepen 供您查看应用程序和我的完整 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();
    };
  }
});

[...]

【问题讨论】：

标签： javascript angularjs ionic-framework ionic

【解决方案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'
        }
      }
    })

【讨论】：

【解决方案2】：

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

在下面的代码行中给出 ng-hide="" 并通过 mainCtrl 使这个变量为真或假

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

【讨论】：

是的，我知道（这就是我对 ng-if 所做的），但我不希望左侧按钮消失，而是滑动到时所有页面上的“空”右侧菜单左边...
好的，所以当我们隐藏左侧菜单时，我们也必须在滑动时禁用？
我想禁用右侧菜单，但是是的，完全正确。即使 ng-if=false 设置在右侧的 ion-side-menu 上，仍然可以将其滑动打开。但是内容已经消失了。
如果菜单只能使用导航图标打开就可以了吗？
我希望我的侧边菜单只要显示出来就可以通过滑动打开。我知道我通常可以禁用所有菜单的滑动，但这是一个相当不令人满意的解决方案......

【解决方案3】：

好的，所以经过更多研究后，我偶然发现了 $ionicSideMenuDelegate，它显然也可以只修改一个侧边菜单的设置。我不知道这一点，因此我想将我的解决方案分享给其他可能遇到类似问题的人：

$rootScope.$on('$stateChangeSuccess', 
  function(event, toState, toParams, fromState, fromParams){
      if (toState.name == 'events'){
          $scope.showRightMenu = true;
          $ionicSideMenuDelegate._instances[0].right.isEnabled = true;
      }
      else {
          $scope.showRightMenu = false;
          $ionicSideMenuDelegate._instances[0].right.isEnabled = false;
      }
  })

【讨论】：

我把它放在主 App-Controller 中

【解决方案4】：

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

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

请参阅http://ionicframework.com/docs/api/directive/ionSideMenu/ 上的文档

【讨论】：