如何让我的离子侧菜单按钮工作
How do I get my ionic side menu button working?
我最近尝试创建一个离子侧菜单。我遇到了一个问题,当我滑动主体时,它打开了菜单。但我取消了滑动功能,现在我无法打开菜单。我想点击导航图标打开菜单,但不知道如何操作。
这是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>
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>
在index.html中,用ng-click="toggleProjects()"
替换menu-toggle="left"
,并在app.js中添加此
$scope.toggleProjects = function() {
$ionicSideMenuDelegate.toggleLeft();
};
以下是我所做的:
<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
}
};
相关文章:
- 下拉菜单在菜单按钮的边缘闪闪发光
- 圆形到圆角三角形(菜单按钮切换)
- 使用PhoneGap禁用Android中的菜单按钮
- 如何在滚动时突出显示菜单按钮 - AngularJs
- 将jQuery菜单按钮链接到url
- 使用一个菜单按钮添加animate-in和animate-out类
- 简单的Jquery菜单按钮重复动画,我怎么能停止这个
- 引导两个响应菜单-单击另一个菜单按钮时折叠一个菜单
- Phonegap+JQuery Mobile:如何从Android菜单按钮弹出
- 使用javascript自动点击youtube评论页面中的菜单按钮
- 菜单打开和关闭菜单按钮 - Jquery
- Joomla 2.5 菜单按钮不起作用
- 如何让我的 ckEditor 菜单按钮显示在两行而不是四行上
- 如何让我的移动菜单按钮显示和隐藏导航栏,以及在负空间中单击时隐藏
- 单击下拉菜单按钮时引导打开链接
- 聚合物:纸张操作对话框打开时,纸张菜单按钮不会关闭
- 引导移动菜单按钮不可见
- 引导滚动间谍不起作用,导航菜单按钮导致标题重新加载
- 在 D3 中按菜单按钮后调用轴
- 如何更改菜单按钮周围的区域以使其可单击