如何让我的离子侧菜单按钮工作？答案

【问题标题】：How do I get my ionic side menu button working?如何让我的离子侧菜单按钮工作？
【发布时间】：2014-12-31 10:14:49
【问题描述】：

我最近尝试创建一个离子侧边菜单。我有一个问题，当我滑动主体时，它打开了菜单。但是我关闭了滑动功能，现在我无法打开菜单。我希望能够单击导航图标以打开菜单但不知道如何操作。

这里是 JavaScript：

.controller('TodoCtrl', function($scope, $timeout, $ionicModal, Projects, $ionicSideMenuDelegate) {


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

这是包含按钮的标题代码：

<body ng-app="todo" ng-controller="TodoCtrl">
  <ion-side-menus>

  <!-- Center content -->
  <ion-side-menu-content>
  <ion-header-bar class="bar-dark">
  <button class="button button-icon button-clear ion-navicon" ng-click="toggleLeft()">
  </button>
  <h1 class="title">{{activeProject.title}}</h1>
  <!-- New Task button-->
  <button class="button button-icon" ng-click="newTask()">
    <i class="icon ion-compose"></i>
  </button>
</ion-header-bar>
<ion-content scroll="false">
<td-cards class="theLabel" id="card" ng-repeat="task in activeProject.tasks">
<td-card class="card-{{card.index}}">
<h4 style="text-align:center"> {{task.title}}</h4>
</td-card>
</td-cards>

这里是菜单内容：

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

      <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">
           <edge-drag-threshold="true" drag-content="true">
           </ion-content>
       </ion-pane> 

   </ion-side-menus>

【问题讨论】：

你能创建一个显示问题的 CodePen 吗？

标签： javascript html ionic-framework hybrid-mobile-app hybrid

【解决方案1】：

Ionic 有一个方便的menu-toggle 指令可供使用，因此您可以像这样在按钮上切换菜单。

http://ionicframework.com/docs/api/directive/menuToggle/

<ion-header-bar class="bar-dark">
  <button class="button button-icon button-clear ion-navicon" menu-toggle="left">
  </button>
  <h1 class="title">{{activeProject.title}}</h1>
  <!-- New Task button-->
  <button class="button button-icon" ng-click="newTask()">
    <i class="icon ion-compose"></i>
  </button>
</ion-header-bar>

【讨论】：

这仍然无法打开...我需要更改 Javascript 或菜单内容代码中的任何内容吗？
如果没有完整的代码或演示来显示问题，很难确切知道。它应该可以工作，但必须有其他未显示的事情发生。
但是如果你想在用户点击硬件后退按钮时打开侧边菜单呢？
使用 $ionicPlatform ionicframework.com/docs/api/service/$ionicPlatform 功能监听硬件返回按钮，然后使用 $ionSideMenuDelegate ionicframework.com/docs/api/service/$ionicSideMenuDelegate 切换菜单。

【解决方案2】：

在 index.html 中，将 menu-toggle="left" 替换为 ng-click="toggleProjects()" 并在 app.js 中添加此

$scope.toggleProjects = function() {
  $ionicSideMenuDelegate.toggleLeft();
};

【讨论】：

【解决方案3】：

这是我的工作：

<ion-header-bar class="bar-dark">
  <button class="button button-icon" ng-click="toggleSideMenu()">
    <i class="icon ion-navicon"></i>
  </button>
  <h1 class="title">{{ activeProject.title }}</h1>
</ion-header-bar>

在 app.js 中，通过$ionicSideMenuDelegate.isOpen()检查

$scope.toggleSideMenu = function() {
  if ($ionicSideMenuDelegate.isOpen()) {
    $ionicSideMenuDelegate.toggleLeft(false); // close
  } else {
    $ionicSideMenuDelegate.toggleLeft(); // open
  }
};

【讨论】：

帮助，我需要检查侧边菜单是否打开，因为我想在切换到新标签时关闭它:)