[英]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: 这是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-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>
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>
Ionic has a handy menu-toggle
directive to use so you can toggle the menu on a button like this. Ionic可以使用方便的menu-toggle
指令,因此您可以像这样在按钮上切换菜单。
http://ionicframework.com/docs/api/directive/menuToggle/ 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>
In index.html, replace menu-toggle="left"
with ng-click="toggleProjects()"
and in app.js add this 在index.html中,用ng-click="toggleProjects()"
替换menu-toggle="left"
, ng-click="toggleProjects()"
在app.js中添加它
$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()
在app.js中 ,使用$ionicSideMenuDelegate.isOpen()
检查
$scope.toggleSideMenu = function() {
if ($ionicSideMenuDelegate.isOpen()) {
$ionicSideMenuDelegate.toggleLeft(false); // close
} else {
$ionicSideMenuDelegate.toggleLeft(); // open
}
};
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.