如何让我的离子侧面菜单按钮正常工作？

我最近尝试创建一个离子侧面菜单。我遇到了一个问题，当我滑动主体时，它打开了菜单。但是我关掉了滑动功能，现在我无法打开菜单。我希望能够点击navicon图标来打开菜单，但不知道如何操作。如何让我的离子侧面菜单按钮正常工作？

这里是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>

来源

2014-11-04 Garrett

你可以创建CodePen来显示问题吗？ – 2014-11-04 14:45:18

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>

来源

2014-11-04 14:47:21

这仍然无法打开...我是否需要更改Javascript或菜单内容代码中的任何内容？ – Garrett 2014-11-04 15:07:30

没有完整的代码或演示来显示问题，它很难确切地知道。它应该工作，但还有其他事情必须进行，但没有显示。 – 2014-11-04 21:24:15

但是如果你想在用户点击硬件后退按钮时打开侧面菜单怎么办？ – 2015-04-09 12:46:09

index.html中，用ng-click="toggleProjects()"和app.js取代menu-toggle="left"添加此

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

来源

2015-06-11 09:27:19

这里是我做的：

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

来源

2015-12-05 04:04:37 Sithu

帮助，我需要检查侧面菜单是否打开，因为我想在切换到新选项卡时关闭它。 – 2016-04-05 13:20:35

如何让我的离子侧面菜单按钮正常工作？

回答

相关问题