ionic之 ActionSheetController
来源:互联网 发布:mysql pdf 微盘 编辑:程序博客网 时间:2024/05/16 02:13
在说明ActionSheetController的使用之前,先看看官方对ActionSheetController的解释。
官方地址:http://ionicframework.com/docs/api/components/action-sheet/ActionSheetController/
在项目引用库ionic.bundle.js 有这样的注释,如下:
* @ngdoc method * @name $ionicActionSheet#show * @description * Load and return a new action sheet. * * A new isolated scope will be created for the * action sheet and the new element will be appended into the body. * * @param {object} options The options for this ActionSheet. Properties: * * - `[Object]` `buttons` Which buttons to show. Each button is an object with a `text` field. * - `{string}` `titleText` The title to show on the action sheet. * - `{string=}` `cancelText` the text for a 'cancel' button on the action sheet. * - `{string=}` `destructiveText` The text for a 'danger' on the action sheet. * - `{function=}` `cancel` Called if the cancel button is pressed, the backdrop is tapped or * the hardware back button is pressed. * - `{function=}` `buttonClicked` Called when one of the non-destructive buttons is clicked, with the index of the button that was clicked and the button object. Return true to close * the action sheet, or false to keep it opened. * - `{function=}` `destructiveButtonClicked` Called when the destructive button is clicked. Return true to close the action sheet, or false to keep it opened. * - `{boolean=}` `cancelOnStateChange` Whether to cancel the actionSheet when navigating to a new state. Default true. * - `{string}` `cssClass` The custom CSS class name. * @returns {function} `hideSheet` A function which, when called, hides & cancels the action sheet.
So,接下来这样使用:
第一步:
在 html 页面一个元素中加入一个触发事件方法showActionSheetController(),如
<ion-item ng-click="showActionSheetController()">显示ActionSheetController</ion-item>
第二步,在对应的 js 中实现方法,这里注意用到了
如
angular.module("to-do",['ionic']).controller('todoCtrl',function ($scope,$http,$ionicActionSheet,$timeout){//to-do list});
实现showActionSheetController,代码如下:
$scope.showActionSheetController = function () { var hideSheet = $ionicActionSheet.show({ buttons:[ {text:'<b>Share</b>' }, {text:'Favorite'} ], titleText:'温馨提示', cancelText:'Cancel', destructiveText:'Delete', cancel:function () { console.log("cancel你点击了"); }, destructiveButtonClicked: function () { console.log("你点击了destructiveButton"); return true; }, buttonClicked: function (index) { console.log("你点击了" + index); return true; }, }); $timeout(function () { hideSheet();},2000); };
这里说明一下,2秒后自动关闭执行的是 cancel方法。
阅读全文
0 0
- ionic之 ActionSheetController
- ionic学习之建立一个ionic项目
- 1.ionic系列之初识ionic
- ionic入门之开始使用ionic框架
- 开启Ionic之旅
- ionic之路由跳转
- ionic之路
- ionic之简单实例
- ionic之创建列表
- ionic学习之旅
- ionic之样式button
- ionic之无序列表
- ionic之单选框
- ionic之切换开关
- Ionic之基本布局
- hybrid之ionic常见问题
- ionic之 bug
- 前端之框架-ionic
- 剑指offer题13
- Python 学习笔记
- 【长沙·签约】中企动力伴湖南海诺电梯同行 共创互联网云平台
- Linux设置开机自启动
- 【C++】带命令行的main函数详解
- ionic之 ActionSheetController
- zxing使用笔记
- export与module.export的区别和用法
- Spring MVC 4.1.0配置Jackson
- HAProxy安装配置详解
- struts2学习之---配置处理结果
- PCB中过孔和通孔焊盘的区别
- 华为OJ——整数与IP地址间的转换
- Eclipse报错Java compiler level does not match the version of the installed Java project facet.解决办法