javascript - How do I get my ionic side menu button working?

I recently tried creating an ionic side menu. I had a problem where when I swiped the main body it opened up the menu. But I took the swipe function off and now I can't open the menu. I want to be able to click the navicon icon to be able to open the menu but don't know how to do it.

Here is the JavaScript:

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


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

Here is the header code which contains the button:

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

Here is the menu content:

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

Here is the JavaScript:

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


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

Here is the header code which contains the button:

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

Here is the menu content:

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

Share Improve this question edited Apr 14, 2015 at 21:19 Chris Rae 5,6752 gold badges38 silver badges54 bronze badges asked Nov 4, 2014 at 13:40 Garrett 2613 gold badges7 silver badges16 bronze badges

Can you create a CodePen showing the problem? – Andrew McGivery Commented Nov 4, 2014 at 14:45

Add a ment |

3 Answers 3

Sorted by: Reset to default 3

Ionic has a handy menu-toggle directive to use so you can toggle the menu on a button like this.

http://ionicframework./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-pose"></i>
  </button>
</ion-header-bar>

In index.html, replace menu-toggle="left" with ng-click="toggleProjects()" and in app.js add this

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

Here is what I do:

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

In app.js, check with $ionicSideMenuDelegate.isOpen()

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

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

javascript - How do I get my ionic side menu button working? - Stack Overflow

3 Answers 3

与本文相关的文章