$ionicPopup
See the Pen by Ionic (&＃64;ionic) on CodePen.
Ionic弹窗服务允许程序创建、显示弹出窗口&＃xff0c;需要用户继续响应。
弹窗系统支持更多灵活的构建alert()&＃xff0c;prompt()和confirm()功能版本&＃xff0c;以及用户习惯&＃xff0c;除了允许查看完全自定义内容的的弹窗。
用法
一些基本的例子&＃xff0c;查看下文了解所有可用的选项详情。
angular.module(&＃39;mySuperApp&＃39;, [&＃39;ionic&＃39;])
.controller(function($scope, $ionicPopup, $timeout) {
// 触发一个按钮点击&＃xff0c;或一些其他目标
$scope.showPopup &＃61; function() {
$scope.data &＃61; {}
// 一个精心制作的自定义弹窗
var myPopup &＃61; $ionicPopup.show({
template: &＃39;&＃39;,
title: &＃39;Enter Wi-Fi Password&＃39;,
subTitle: &＃39;Please use normal things&＃39;,
scope: $scope,
buttons: [
{ text: &＃39;Cancel&＃39; },
{
text: &＃39;Save&＃39;,
type: &＃39;button-positive&＃39;,
onTap: function(e) {
if (!$scope.data.wifi) {
//不允许用户关闭&＃xff0c;除非他键入wifi密码
e.preventDefault();
} else {
return $scope.data.wifi;
}
}
},
]
});
myPopup.then(function(res) {
console.log(&＃39;Tapped!&＃39;, res);
});
$timeout(function() {
myPopup.close(); //由于某种原因3秒后关闭弹出
}, 3000);
// 一个确认对话框
$scope.showConfirm &＃61; function() {
var confirmPopup &＃61; $ionicPopup.confirm({
title: &＃39;Consume Ice Cream&＃39;,
template: &＃39;Are you sure you want to eat this ice cream?&＃39;
});
confirmPopup.then(function(res) {
if(res) {
console.log(&＃39;You are sure&＃39;);
} else {
console.log(&＃39;You are not sure&＃39;);
}
});
};
// 一个提示对话框
$scope.showAlert &＃61; function() {
var alertPopup &＃61; $ionicPopup.alert({
title: &＃39;Don\&＃39;t eat that!&＃39;,
template: &＃39;It might taste good&＃39;
});
alertPopup.then(function(res) {
console.log(&＃39;Thank you for not eating my delicious ice cream cone&＃39;);
});
};
};
});
方法
show(可选)
显示一个复杂的对话框。 这是一个所有弹窗的主体显示功能。
一个带有按钮组的复杂弹窗&＃xff0c;每个按钮带有一个文本 和 类型字段&＃xff0c;此外还有一个 onTap功能。当点击弹窗上的相关按钮&＃xff0c;会触发onTap函数&＃xff0c;默认会关闭弹窗&＃xff0c;处理弹窗的返回值。如果你想阻止默认动作&＃xff0c;点击按钮保持打开弹窗&＃xff0c;当点击一个事件时&＃xff0c;触发event.preventDefault()。详见下文。
参数
类型
详情
options
object
新弹窗的选项的表现形式&＃xff1a;
{
title: &＃39;&＃39;, // String. 弹窗的标题。
subTitle: &＃39;&＃39;, // String (可选)。弹窗的子标题。
template: &＃39;&＃39;, // String (可选)。放在弹窗body内的html模板。
templateUrl: &＃39;&＃39;, // String (可选)。在弹窗body内的html模板的URL。
scope: null, // Scope (可选)。一个链接到弹窗内容的scope(作用域)。
buttons: [{ //Array[Object] (可选)。放在弹窗footer内的按钮。
text: &＃39;Cancel&＃39;,
type: &＃39;button-default&＃39;,
onTap: function(e) {
// 当点击时&＃xff0c;e.preventDefault() 会阻止弹窗关闭。
e.preventDefault();
}
}, {
text: &＃39;OK&＃39;,
type: &＃39;button-positive&＃39;,
onTap: function(e) {
// 返回的值会导致处理给定的值。
return scope.data.response;
}
}]
}
返回:
object 当关闭弹窗时&＃xff0c;处理一个promise。有一个附加的关闭函数&＃xff0c;用于利用程序关闭弹窗。
alert(可选)
显示一个带有一段信息和一个用户可以点击关闭弹窗的按钮的简单提示弹窗。
参数
类型
Details
options
object
显示提示的选项形式&＃xff1a;
{
title: &＃39;&＃39;, // String. 弹窗的标题。
subTitle: &＃39;&＃39;, // String (可选)。弹窗的子标题。
template: &＃39;&＃39;, // String (可选)。放在弹窗body内的html模板。
templateUrl: &＃39;&＃39;, // String (可选)。 放在弹窗body内的html模板的URL。
okText: &＃39;&＃39;, // String (默认: &＃39;OK&＃39;)。OK按钮的文字。
okType: &＃39;&＃39;, // String (默认: &＃39;button-positive&＃39;)。OK按钮的类型。
}
返回:
object 当弹窗关闭时&＃xff0c;处理的一个 promise。有一个额外的关闭函数&＃xff0c;可以被带有任何给定的值的关闭程序调用。
confirm(可选)
显示一个简单的带有一个取消和OK按钮的对话框弹窗。
如果用户点击OK按钮&＃xff0c;就设置promise为true&＃xff0c;如果用户点击取消按钮则为false。
参数
类型
详情
options
object
显示对话框弹窗选项的形式&＃xff1a;
{
title: &＃39;&＃39;, // String. 弹窗标题。
subTitle: &＃39;&＃39;, // String (可选)。弹窗的副标题。
template: &＃39;&＃39;, // String (可选)。放在弹窗body内的html模板。
templateUrl: &＃39;&＃39;, // String (可选)。放在弹窗body内的一个html模板的URL。
cancelText: &＃39;&＃39;, // String (默认: &＃39;Cancel&＃39;)。一个取消按钮的文字。
cancelType: &＃39;&＃39;, // String (默认: &＃39;button-default&＃39;)。取消按钮的类型。
okText: &＃39;&＃39;, // String (默认: &＃39;OK&＃39;)。OK按钮的文字。
okType: &＃39;&＃39;, // String (默认: &＃39;button-positive&＃39;)。OK按钮的类型。
}
返回:
object 当关闭对话框时&＃xff0c;处理的一个promise。当弹窗关闭时&＃xff0c;处理的一个 promise。有一个额外的关闭函数&＃xff0c;可以被带有任何给定的值的关闭程序调用。
prompt(可选)
显示一个简单的提示弹窗&＃xff0c;带有一个input&＃xff0c; OK 按钮&＃xff0c;和取消按钮。如果用户点击OK&＃xff0c;就设置promise的值&＃xff0c;如果用户点击取消&＃xff0c;则值为未定义。
$ionicPopup.prompt({
title: &＃39;Password Check&＃39;,
template: &＃39;Enter your secret password&＃39;,
inputType: &＃39;password&＃39;,
inputPlaceholder: &＃39;Your password&＃39;
}).then(function(res) {
console.log(&＃39;Your password is&＃39;, res);
});
参数
类型
详情
options
object
显示的提示弹窗选项的形式&＃xff1a;
{
title: &＃39;&＃39;, // String. 弹窗的标题。
subTitle: &＃39;&＃39;, // String (可选)。弹窗的副标题。
template: &＃39;&＃39;, // String (可选)。放在弹窗body内的html模板。
templateUrl: &＃39;&＃39;, // String (可选)。放在弹窗body内的html模板的URL。
inputType: // String (默认: &＃39;text&＃39;)。input的类型。
inputPlaceholder: // String (默认: &＃39;&＃39;)。input的 placeholder。
cancelText: // String (默认: &＃39;Cancel&＃39;)。取消按钮的文字。
cancelType: // String (默认: &＃39;button-default&＃39;)。取消按钮的类型。
okText: // String (默认: &＃39;OK&＃39;)。OK按钮的文字。
okType: // String (默认: &＃39;button-positive&＃39;)。OK按钮的类型。
}
返回:
object 当关闭对话框时&＃xff0c;处理的一个promise。当弹窗关闭时&＃xff0c;处理的一个 promise。有一个额外的关闭函数&＃xff0c;可以被带有任何给定的值的关闭程序调用。
京公网安备 11010802041100号