ionic系列控件之Action Sheet

一、$ionicActionSheet

Action Sheet是一个提供给用户多个选项的滑动窗格，危险的选项用红色高亮并且显眼。提供了一些简单的方式来取消窗格，比如点击背景或者点击键盘。

 

二、使用

触发Action Sheet需要使用$ionicActionSheet服务

 

Controller:

$scope.messages = [];
  $scope.takeAction = function() {
    var hideSheet = $ionicActionSheet.show({
      buttons: [
        { text: 'Share <i class="icon ion-share">' },
        { text: 'Edit <i class="icon ion-edit">' }
      ],
      destructiveText: 'Delete <i class="icon ion-trash-b">',
      titleText: 'Modify your album',
      cancelText: 'Cancel',
      cancel: function() {
        $scope.message('Cancel');
        return true;
      },
      buttonClicked: function(index) {
        $scope.message(index === 0 ? 'Share' : 'Edit');
        return true;
      },
      destructiveButtonClicked: function() {
        $scope.message('Delete');
        return true;
      }
    });

    $timeout(function() {
     hideSheet();
   }, 2000);

 

html:

<ion-content class="padding">
  <div class="button button-assertive button-block" ng-click="takeAction()">
    Action Sheet
  </div>
</ion-content>

 

三、方法：

　show(options)

　加载和返回一个新的action sheet，为action sheet创建一个新的独立的scope，并且添加到body上。

 

参考：

1、http://www.ionicframework.com/docs/api/service/$ionicActionSheet/

2、https://github.com/driftyco/ionic/tree/master/demos/service/actionSheet