ionic ActionSheet(上拉菜单)

1、$ionicActionSheet
   ionic的上拉菜单由三种按钮组成，点击任何按钮都自动关闭上拉菜单;

   取消按钮 - 取消按钮总是位于菜单的底部，用户点击该按钮将关闭。一个上拉菜单 最多有一个取消按钮。
   危险选项按钮 - 危险选项按钮文字被标红以明显提示。一个上拉菜单最多有一个 危险选项按钮。
   自定义按钮 - 用户定义的任意数量的按钮。

2、参数
   titleText - 上拉菜单的标题文本
   buttons - 自定义按钮数组。每个按钮需要一个描述对象，其text字段用于按钮显示
   cancelText - 取消按钮的文本。如果不设置此字段，则上拉菜单中不出现取消按钮
   destructiveText - 危险选项按钮的文本。如果不设置此字段，则上拉菜单中不出现危险选项按钮
   buttonClicked - 自定义按钮的回调函数，当用户点击时触发
   cancel - 取消按钮回调函数，当用户点击时触发
   destructiveButtonClicked - 危险选项按钮的回调函数，当用户点击时触发
   cancelOnStateChange - 当切换到新的视图时是否关闭此上拉菜单。默认为true
   cssClass - 附加的CSS样式类名称

1、Html

<ion-header-bar class="bar bar-header bar-light bar-calm">
    <button class="button button-icon icon ion-navicon"></button>
    <ion-title class="bar-calm">腾讯新闻</ion-title>
</ion-header-bar>

<ion-content>
    <button class="button button-dark" ng-click="show()">show</button>
</ion-content>

2、Controllerl

appCntrollers.controller('ManageActionSheetCtrl', function ($scope, $timeout, $ionicActionSheet) {
    // 点击按钮触发，或一些其他的触发条件
    $scope.show = function () {
        // 显示操作表
        $ionicActionSheet.show({
            titleText: '修改你的专辑',
            destructiveText: '删除',
            cancelText: '取消',
            buttons: [
                { text: '<b>分享</b> 快乐' },
                { text: '拍摄照片' },
                { text: '相册选择' },
            ],
            cancel: function () {
                alert('取消事件！');
            },
            destructiveButtonClicked: function () {
                alert('删除事件！');
                return true;
            },
            buttonClicked: function (index) {
                switch (index) {
                    case 0:
                        //appendByCamera();
                        alert('分享快乐');
                        break;
                    case 1:
                        alert('拍摄照片');
                        break;
                    case 2:
                        alert('相册选择');
                        break;
                    default:
                        break;
                }
                return true;
            }
        });
    };
})

3、效果图