轉自：http://www.ionicframework.com/docs/api/service/%24ionicPopup/

Usage

A few basic examples, see below for details about all of the options available.

angular.module('mySuperApp', ['ionic']) .controller('PopupCtrl',function($scope, $ionicPopup, $timeout) { // Triggered on a button click, or some other target $scope.showPopup = function() { $scope.data = {} // An elaborate, custom popup var myPopup = $ionicPopup.show({ template: '<input type="password" ng-model="data.wifi">', title: 'Enter Wi-Fi Password', subTitle: 'Please use normal things', scope: $scope, buttons: [ { text: 'Cancel' }, { text: '<b>Save</b>', type: 'button-positive', onTap: function(e) { if (!$scope.data.wifi) { //don't allow the user to close unless he enters wifi password e.preventDefault(); } else { return $scope.data.wifi; } } } ] }); myPopup.then(function(res) { console.log('Tapped!', res); }); $timeout(function() { myPopup.close(); //close the popup after 3 seconds for some reason }, 3000); }; // A confirm dialog $scope.showConfirm = function() { var confirmPopup = $ionicPopup.confirm({ title: 'Consume Ice Cream', template: 'Are you sure you want to eat this ice cream?' }); confirmPopup.then(function(res) { if(res) { console.log('You are sure'); } else { console.log('You are not sure'); } }); }; // An alert dialog $scope.showAlert = function() { var alertPopup = $ionicPopup.alert({ title: 'Don\'t eat that!', template: 'It might taste good' }); alertPopup.then(function(res) { console.log('Thank you for not eating my delicious ice cream cone'); }); }; });

Methods

show(options)

Show a complex popup. This is the master show function for all popups.

A complex popup has a?buttons?array, with each button having a?text?and?type?field, in addition to an?onTap?function. The?onTap?function, called when the corresponding button on the popup is tapped, will by default close the popup and resolve the popup promise with its return value. If you wish to prevent the default and keep the popup open on button tap, call?event.preventDefault()?on the passed in tap event. Details below.

ParamTypeDetails

options	object	The options for the new popup, of the form: {title: '', // String. The title of the popup.cssClass: '', // String, The custom CSS class namesubTitle: '', // String (optional). The sub-title of the popup.template: '', // String (optional). The html template to place in the popup body.templateUrl: '', // String (optional). The URL of an html template to place in the popup body.scope: null, // Scope (optional). A scope to link to the popup content.buttons: [{ // Array[Object] (optional). Buttons to place in the popup footer.text: 'Cancel',type: 'button-default',onTap: function(e) {// e.preventDefault() will stop the popup from closing when tapped.e.preventDefault();}}, {text: 'OK',type: 'button-positive',onTap: function(e) {// Returning a value will cause the promise to resolve with the given value.return scope.data.response;}}] }

• Returns:?object?A promise which is resolved when the popup is closed. Has an additional?close?function, which can be used to programmatically close the popup.

alert(options)

Show a simple alert popup with a message and one button that the user can tap to close the popup.

ParamTypeDetails

options	object	The options for showing the alert, of the form: {title: '', // String. The title of the popup.cssClass: '', // String, The custom CSS class namesubTitle: '', // String (optional). The sub-title of the popup.template: '', // String (optional). The html template to place in the popup body.templateUrl: '', // String (optional). The URL of an html template to place in the popup body.okText: '', // String (default: 'OK'). The text of the OK button.okType: '', // String (default: 'button-positive'). The type of the OK button. }

• Returns:?object?A promise which is resolved when the popup is closed. Has one additional function?close, which can be called with any value to programmatically close the popup with the given value.

confirm(options)

Show a simple confirm popup with a Cancel and OK button.

Resolves the promise with true if the user presses the OK button, and false if the user presses the Cancel button.

ParamTypeDetails

options	object	The options for showing the confirm popup, of the form: {title: '', // String. The title of the popup.cssClass: '', // String, The custom CSS class namesubTitle: '', // String (optional). The sub-title of the popup.template: '', // String (optional). The html template to place in the popup body.templateUrl: '', // String (optional). The URL of an html template to place in the popup body.cancelText: '', // String (default: 'Cancel'). The text of the Cancel button.cancelType: '', // String (default: 'button-default'). The type of the Cancel button.okText: '', // String (default: 'OK'). The text of the OK button.okType: '', // String (default: 'button-positive'). The type of the OK button. }

• Returns:?object?A promise which is resolved when the popup is closed. Has one additional function?close, which can be called with any value to programmatically close the popup with the given value.

prompt(options)

Show a simple prompt popup, which has an input, OK button, and Cancel button. Resolves the promise with the value of the input if the user presses OK, and with undefined if the user presses Cancel.

$ionicPopup.prompt({title: 'Password Check', template: 'Enter your secret password', inputType: 'password', inputPlaceholder: 'Your password' }).then(function(res) { console.log('Your password is', res); }); ParamTypeDetails

options	object	The options for showing the prompt popup, of the form: {title: '', // String. The title of the popup.cssClass: '', // String, The custom CSS class namesubTitle: '', // String (optional). The sub-title of the popup.template: '', // String (optional). The html template to place in the popup body.templateUrl: '', // String (optional). The URL of an html template to place in the popup body.inputType: // String (default: 'text'). The type of input to useinputPlaceholder: // String (default: ''). A placeholder to use for the input.cancelText: // String (default: 'Cancel'. The text of the Cancel button.cancelType: // String (default: 'button-default'). The type of the Cancel button.okText: // String (default: 'OK'). The text of the OK button.okType: // String (default: 'button-positive'). The type of the OK button. }

• Returns:?object?A promise which is resolved when the popup is closed. Has one additional function?close, which can be called with any value to programmatically close the popup with the given value.

轉載于:https://www.cnblogs.com/1992825-Amelia/p/4847076.html

總結

以上是生活随笔為你收集整理的$ionicPopup的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。