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 中实现方法,这里注意用到了ionicActionSheetcontrollerionicActionSheet。

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方法。

原创粉丝点击