$ionicActionSheet

上拉菜单(ActionSheet)通过向上弹出的框,来让用户选择选项。

危险的选项可以以高亮的红色让人第一时间识别。你可以通过点击取消按钮或者点击空白的地方让它消失。

注:ionic自定义的上拉菜单非原生(需要调用原生上拉菜单请用ngCordova

Action Sheet

实例该文档来自ionic中文网ionic-china

在代码中触发上拉菜单,需要在你的 angular 控制器中使用 $ionicActionSheet 服务:

angular.module('mySuperApp', ['ionic'])
.controller(function($scope, $ionicActionSheet, $timeout) {

 // 点击按钮调用方法触发,或一些其他的触发条件
 $scope.show = function() {

   // 显示上拉菜单
   var hideSheet = $ionicActionSheet.show({
     buttons: [
       { text: '<b>Share</b> This' },
       { text: 'Move' }
     ],
     destructiveText: 'Delete',
     titleText: 'Modify your album',
     cancelText: 'Cancel',
     cancel: function() {
          // 这里添加取消代码
        },
     buttonClicked: function(index) {
       return true;
     }
   });

   // 2秒后再次调用隐藏菜单
   $timeout(function() {
     hideSheet();
   }, 2000);

 };
});

方法

show(options)

加载并返回上拉菜单对象。

会在body标签内为上拉菜单创建一个独立的元素。

参数 类型 说明
options object

上拉菜单的options可用属性:

  • [Object] buttons 显示的按钮组文本,对应 text 对象
  • {string} titleText 菜单标题
  • {string=} cancelText "取消"按钮的文本
  • {string=} destructiveText "红色"危险按钮的文本
  • {function=} cancel 取消菜单后的回调函数
  • {function=} buttonClicked 按钮组的触发回调函数返回按钮索引,可以返回false/true以保持或关闭上拉菜单
  • {function=} destructiveButtonClicked 红色"危险按钮的回调事件,可以返回false/true以保持或关闭上拉菜单
  • {boolean=} cancelOnStateChange 是否在菜单取消后更换到一个新状态,默认为true
  • {string} cssClass 自定义CSS类名
  • 返回: function hideSheet 返回对象再次调用则隐藏上拉菜单