如何使離子性側面菜單按鈕正常工作？

Question

我最近嘗試創建一個離子性側面菜單。 我有一個問題，當我滑動主體時會打開菜單。 但是我取消了滑動功能，現在無法打開菜單。 我希望能夠單擊導航圖標以打開菜單，但不知道如何操作。

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

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

Answer 2

在index.html中，用ng-click="toggleProjects()"替換menu-toggle="left" ， ng-click="toggleProjects()"在app.js中添加它

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

Answer 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
  }
};

如何使離子性側面菜單按鈕正常工作？

問題描述

3 個解決方案

解決方案1
3 已采納 2014-11-04 14:47:21

解決方案2
2 2015-06-11 09:27:19

解決方案3
1 2015-12-05 04:04:37

如何使離子性側面菜單按鈕正常工作？

問題描述

3 個解決方案

解決方案1 3 已采納 2014-11-04 14:47:21

解決方案2 2 2015-06-11 09:27:19

解決方案3 1 2015-12-05 04:04:37

解決方案1
3 已采納 2014-11-04 14:47:21

解決方案2
2 2015-06-11 09:27:19

解決方案3
1 2015-12-05 04:04:37