ionic 上拉菜单(ActionSheet)

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

那些风险很高的选项，会用醒目的红色高亮出来，目的就是让人一眼注意到。想把它关闭也很简单，点一下取消按钮，或者直接点空白区域，它就会消失。

实例

HTML 代码

        
            
Action Sheet
        
    

Ja vaScript 代码

如果想在代码里主动调起上拉菜单，做法并不复杂，直接在你的 angular 控制器中调用 $ionicActionSheet 服务就可以了：

angular.module('starter', ['ionic'])
.run(function($ionicPlatform) {
  $ionicPlatform.ready(function() {
    // Hide the accessory bar by default (remove this to show the accessory bar above the keyboard
    // for form inputs)
    if(window.cordova && window.cordova.plugins.Keyboard) {
      cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
    }
    if(window.StatusBar) {
      StatusBar.styleDefault();
    }
  });
})
.controller( 'actionsheetCtl',['$scope','$ionicActionSheet','$timeout' ,function($scope,$ionicActionSheet,$timeout){
    $scope.show = function() {
var hideSheet = $ionicActionSheet.show({
            buttons: [
              { text: 'Share This' },
              { text: 'Move' }
            ],
            destructiveText: 'Delete',
            titleText: 'Modify your album',
            cancelText: 'Cancel',
            cancel: function() {
                 // add cancel code..
               },
            buttonClicked: function(index) {
              return true;
            }
        });
$timeout(function() {
            hideSheet();
        }, 2000);
};  
}])

运行效果如下图：