$ionicPopup

See the Pen by Ionic (@ionic) on CodePen.

对话框通常用于提醒、警告等,在用户响应之前其他交互行为不能进行。与(ionic-china中文网文档)ionicModal模版对话框覆盖整个屏幕不同,对话框仅占一部分屏幕空间。

除了show()方法,$ionicPopup还针对一些特定场景提供了简化的方法,这些方法不需要 自定义按钮,只需要设置titletemplate即可:

  • alert(options) - 警告对话框,仅包含一个按钮供关闭弹出框
  • confirm(options) - 确认对话框,包含一个取消按钮和一个确认按钮
  • prompt(options) - 输入提示对话框,包含一个文本输入框、一个取消按钮和一个确认按钮

可以为输入框添加autofocus属性,用于自动获得焦点。

警告:其他的例子可能导致tap/click功能出问题,这就是为什么ionic使用autofocus

实例该文档来自ionic中文网ionic-china

简单的示例,详细信息请查看下面选项。

angular.module('mySuperApp', ['ionic'])
.controller('PopupCtrl',function($scope, $ionicPopup, $timeout) {

// 用按钮触发或调用
$scope.showPopup = function() {
  $scope.data = {}

  // 自定义弹窗
  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) {
            //必须输入Wifi密码
            e.preventDefault();
          } else {
            return $scope.data.wifi;
          }
        }
      }
    ]
  });
  myPopup.then(function(res) {
    console.log('Tapped!', res);
  });
  $timeout(function() {
     myPopup.close(); //3秒后关闭弹窗
  }, 3000);
 };
 // 确认对话框
 $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');
     }
   });
 };

 // 警告对话框
 $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');
   });
 };
});

方法

show(options)

显示一个可以自定义的对话框,这是显示对话框的主功能。

属性较多的按钮数组包括文本和类型还有onTap方法:onTap对话框被确定时将关闭对话框并返回用户输入的内容,如果你想阻止对话框被关闭请调用event.preventDefault()

参数 类型 说明
options object

show对话框的options可用属性:

{
  title: '', // String. 对话框标题
  cssClass: '', // String, 附加的CSS样式类
  subTitle: '', // String (optional). 对话框副标题文本
  template: '', // String (optional). 对话框内容的字符串模板
  templateUrl: '', // String (optional). 对话框内容的内联模板URL
  scope: null, // Scope (optional). 要关联的作用域对象
  buttons: [{ // Array[Object] (optional). 自定义按钮数组 按钮总是被置于对话框底部
    text: '取消',
    type: 'button-default',
    onTap: function(e) {
      // e.preventDefault() 禁止对话框被关闭
      e.preventDefault();
    }
  }, {
    text: 'OK',
    type: 'button-positive',
    onTap: function(e) {
      // 返回用户输入的值
      return scope.data.response;
    }
  }]
}
  • 返回: object 当对话框关闭后,该对象被解析,then()方法指定的参数函数此时将被调用。

alert(options)

警告弹出框,仅包含一个按钮供关闭弹出框。

参数 类型 说明
options object

alert对话框的options可用属性:

{
  title: '', // String. 对话框标题
  cssClass: '', // String, 附加的CSS样式类
  subTitle: '', // String (optional). 对话框副标题文本
  template: '', // String (optional). 对话框内容的字符串模板
  templateUrl: '', // String (optional). 对话框内容的内联模板URL
  okText: '', // String (默认: 'OK'). OK按钮的标题文本
  okType: '', // String (默认: 'button-positive'). OK按钮的类型
}
  • 返回: object 调用这个对象的.close()方法可以关闭对话框。

confirm(options)

确认弹出框,包含一个取消按钮和一个确认按钮。

按下确定返回true,按下取消返回false。

参数 类型 说明
options object

confirm对话框的options可用属性:

{
  title: '', // String. 对话框标题
  cssClass: '', // String, 附加的CSS样式类
  subTitle: '', // String (optional). 对话框副标题文本
  template: '', // String (optional). 对话框内容的字符串模板
  templateUrl: '', // String (optional). 对话框内容的内联模板URL
  cancelText: '', // String (默认: 'Cancel'). 取消按钮的标题文本
  cancelType: '', // String (默认: 'button-default'). 取消按钮的类型
  okText: '', // String (默认: 'OK'). OK按钮的标题文本
  okType: '', // String (默认: 'button-positive'). OK按钮的类型
}
  • 返回: object 调用这个对象的.close()方法可以关闭对话框。

prompt(options)

输入提示弹出框,包含一个文本输入框、一个取消按钮和一个确认按钮。

 $ionicPopup.prompt({
   title: '密码检查',
   template: '输入您的密码',
   inputType: '密码',
   inputPlaceholder: '您的密码'
 }).then(function(res) {
   console.log('您的密码是', res);
 });
参数 类型 说明
options object

prompt对话框的options可用属性:

{
  title: '', // String. 对话框标题
  cssClass: '', // String, 附加的CSS样式类
  subTitle: '', // String (optional). 对话框副标题文本
  template: '', // String (optional). 对话框内容的字符串模板
  templateUrl: '', // String (optional). 对话框内容的内联模板URL
  inputType: // String (默认: 'text'). 输入框的标题文本
  inputPlaceholder: // String (默认: ''). 一个占位符,用于输入
  cancelText: '', // String (默认: 'Cancel'). 取消按钮的标题文本
  cancelType: '', // String (默认: 'button-default'). 取消按钮的类型
  okText: '', // String (默认: 'OK'). OK按钮的标题文本
  okType: '', // String (默认: 'button-positive'). OK按钮的类型
}
  • 返回: object 调用这个对象的.close()方法可以关闭对话框。