本文介绍了Ionic框架中弹窗服务的使用方法，包括显示复杂弹窗、警告框、确认框及提示框等不同类型的交互组件，并提供了丰富的示例代码。
转自：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.
| Param | Type | Details |
|---|---|---|
| options | object |
The options for the new popup, of the form: |
- Returns:
objectA promise which is resolved when the popup is closed. Has an additionalclosefunction, 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.
| Param | Type | Details |
|---|---|---|
| options | object |
The options for showing the alert, of the form: |
- Returns:
objectA promise which is resolved when the popup is closed. Has one additional functionclose, 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.
| Param | Type | Details |
|---|---|---|
| options | object |
The options for showing the confirm popup, of the form: |
- Returns:
objectA promise which is resolved when the popup is closed. Has one additional functionclose, 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);
});
| Param | Type | Details |
|---|---|---|
| options | object |
The options for showing the prompt popup, of the form: |
- Returns:
objectA promise which is resolved when the popup is closed. Has one additional functionclose, which can be called with any value to programmatically close the popup with the given value.
扫一扫
557
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
