Menú deslizante de Ionic (ActionSheet)

El menú deslizante (ActionSheet) permite al usuario seleccionar opciones a través de un cuadro que aparece deslizándose hacia arriba.

Las opciones muy peligrosas se muestran en rojo brillante para que se identifiquen de inmediato. Puedes hacerlo desaparecer haciendo clic en el botón Cancelar o haciendo clic en el espacio en blanco.

Ejemplo

Código HTML

<body ng-app="starter" ng-controller="actionsheetCtl" >

    <ion-pane>
        <ion-content >
            <h2 ng-click="show()">Action Sheet</h2>
        </ion-content>
    </ion-pane>
</body>

Código JavaScript

Para activar el menú deslizante en el código, debes usar el servicio $ionicActionSheet en tu controlador de Angular:

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: '<b>Share</b> 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);

    };  
}])

El resultado al ejecutarlo se muestra en la siguiente imagen: