diff --git a/js/ext/angular/src/directive/ionicActionSheet.js b/js/ext/angular/src/directive/ionicActionSheet.js index 2e90374820..6615c7ff8a 100644 --- a/js/ext/angular/src/directive/ionicActionSheet.js +++ b/js/ext/angular/src/directive/ionicActionSheet.js @@ -3,6 +3,10 @@ angular.module('ionic.ui.actionSheet', []) +/* + * We don't document the ionActionSheet directive, we instead document + * the $ionicActionSheet service + */ .directive('ionActionSheet', ['$document', function($document) { return { restrict: 'E', diff --git a/js/ext/angular/src/service/ionicActionSheet.js b/js/ext/angular/src/service/ionicActionSheet.js index 77fa5b9692..3c6ac59de4 100644 --- a/js/ext/angular/src/service/ionicActionSheet.js +++ b/js/ext/angular/src/service/ionicActionSheet.js @@ -1,16 +1,73 @@ angular.module('ionic.service.actionSheet', ['ionic.service.templateLoad', 'ionic.service.platform', 'ionic.ui.actionSheet', 'ngAnimate']) +/** + * @ngdoc service + * @name $ionicActionSheet + * @module ionic + * @restrict E + * @description + * The Action Sheet is a slide-up pane that lets the user choose from a set of options. + * Dangerous options are highlighted in red and made obvious. + * + * There are easy ways to cancel out of the action sheet, such as tapping the backdrop or even + * hitting escape on the keyboard for desktop testing. + * + * ![Action Sheet](http://ionicframework.com.s3.amazonaws.com/docs/controllers/actionSheet.gif) + * + * @usage + * To trigger an Action Sheet in your code, use the $ionicActionSheet service in your angular controllers: + * + * ```js + * angular.module('mySuperApp', ['ionic']) + * .controller(function($scope, $ionicActionSheet) { + * + * // Triggered on a button click, or some other target + * $scope.show = function() { + * + * // Show the action sheet + * $ionicActionSheet.show({ + * buttons: [ + * { text: 'Share' }, + * { text: 'Move' }, + * ], + * destructiveText: 'Delete', + * titleText: 'Modify your album', + * cancelText: 'Cancel', + * buttonClicked: function(index) { + * return true; + * } + * }); + * + * }; + * }); + * ``` + * + */ .factory('$ionicActionSheet', ['$rootScope', '$document', '$compile', '$animate', '$timeout', '$ionicTemplateLoader', '$ionicPlatform', - function($rootScope, $document, $compile, $animate, $timeout, $ionicTemplateLoader, $ionicPlatform) { +function($rootScope, $document, $compile, $animate, $timeout, $ionicTemplateLoader, $ionicPlatform) { return { /** - * Load an action sheet with the given template string. + * @ngdoc method + * @name $ionicActionSheet#show + * @description + * Load and return a new action sheet. * * A new isolated scope will be created for the * action sheet and the new element will be appended into the body. * - * @param {object} opts the options for this ActionSheet (see docs) + * @param {object} opts The options for this ActionSheet. Properties: + * + * - `[Object]` `buttons` Which buttons to show. Each button is an object with a `text` field. + * - `{string}` `titleText` The title to show on the action sheet. + * - `{string=}` `cancelText` The text for a 'cancel' button on the action sheet. + * - `{string=}` `destructiveText` The text for a 'danger' on the action sheet. + * - `{function=}` `cancel` Called if the cancel button is pressed or the backdrop is tapped. + * - `{function=}` `buttonClicked` Called when one of the non-destructive buttons is clicked, + * with the index of the button that was clicked. Return true to close the action sheet, + * or false to keep it opened. + * - `{function=}` `destructiveButtonClicked` Called when the destructive button is clicked. + * Return true to close the action sheet, or false to keep it opened. */ show: function(opts) { var scope = $rootScope.$new(true);