$ionicPopup

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

Сервис Ionic Popup позволяет программным способом создавать и отображатьвсплывающие окна, которые требуют ответа пользователя для продолжения процесса работы.

Система всплывающих окон имеет поддержку более гибких версий встроенных функций alert(),prompt(),
и confirm() , к которым уже привыкли пользователи. Но в добавок с их помощью всплывающие окна
будут иметь полностью настраиваемый контент и внешний вид.

Вводу можно присвоить атрибут autofocus , тогда поле ввода будет автоматически в фокусе, когда
впервые будет отображаться всплывающее окно. Однако в зависимости от определенных сценариев использования use-cases это может привести к проблемам с
системой tap/click, поэтому Ionic предпочитает использовать атрибут autofocus
в качестве настраиваемой функции, а не предполагающейся сразу по умолчанию.

Применение

Несколько основных примеров, информацию о всех доступных опциях смотрите ниже.

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');
   });
 };
});

Методы

`show(options)`

Отображает сложное всплывающее окно. Это универсальная функция отображения для всех всплывающих окон.

Сложное всплывающее окно имеет массив кнопок, у каждой кнопки имеется текстовое поле и тип
в дополнение к функции onTap. Функция onTap вызывается, когда нажата соответствующая кнопка всплывающего окна. По умолчанию данная функция закроет окно и обещание будет успешно завершено - будет разрешено его значение возврата. Если вы хотите сделать так, чтобы заданное по умолчанию действие не произошло, и после нажатия на кнопку всплывающее окно оставалось открытым, поставьте вызовevent.preventDefault(), который будет передаваться при наступлении события (касания кнопки). Подробная информация дана ниже.

Параметр	Тип	Описание
options	объект `object`	Опции для нового всплывающего окна, в форме: { title: '', // String. Заголовок всплывающего окна. cssClass: '', // String, subTitle: '', // String (optional). Подзаголовок всплывающего окна. template: '', // String (optional). Шаблон HTML, который нужно поместить в тело всплывающего окна. templateUrl: '', // String (optional). Адрес URL шаблона HTML, который нужно поместить в тело всплывающего окна. scope: null, // Scope (optional). Область видимости, которую нужно связать с контентом всплывающего окна. buttons: [{ // Array[Object] (optional). Кнопки, которые нужно поместить в футер всплывающего окна. text: 'Cancel', type: 'button-default', onTap: function(e) { // e.preventDefault() прекратит процесс закрытия всплывающего окна при касании кнопки. e.preventDefault(); } }, { text: 'OK', type: 'button-positive', onTap: function(e) { // Возвращение значения создаст ситуацию, когда обещание должно будет разрешиться с данным значением. возвращение scope.data.response; } }] }

Возвращает:
object Обещание, которое разрешено, когда всплывающее окно закрыто. Имеет дополнительную функцию
close, которая может использоваться для того чтобы программным способом закрыть всплывающее окно.

`alert(options)`

Отображает простое всплывающее окно с сообщением и одной кнопкой, которую пользователь может
тапнуть, чтобы закрыть окно.

Параметр	Тип	Описание
options	объект `object`	Опции для отображения оповещения, в форме: { title: '', // String. Заголовок всплывающего окна. cssClass: '', // String, Настраиваемое имя класса CSS subTitle: '', // String (optional). Подзаголовок всплывающего окна. template: '', // String (optional). Шаблон HTML, который нужно поместить в тело всплывающего окна. templateUrl: '', // String (optional). URL-адрес шаблона HTML, который нужно поместить в тело всплывающего окна. okText: '', // String (default: 'OK'). Текст кнопки "OK". okType: '', // String (default: 'button-positive'). Тип кнопки "OK". }

Возвращает:
object Обещание, которое разрешено, когда всплывающее окно закрыто. Имеет дополнительную
функцию close, которая может быть вызвана с помощью любого значения, для того чтобы программным способом закрыть всплывающее окно этим самым значением.

`confirm(options)`

Отображает простое всплывающее окно подтверждения кнопкой Cancel и OK.

Разрешает обещание при установленном параметре "true", если пользователь нажимает кнопку "OK", и "false", если
пользователь нажимает кнопку "Cancel".

Параметр	Тип	Описание
options	объект `object`	Параметры для отображения подтверждающего всплывающего окна, имеющего форму: { title: '', // String. Заголовок всплывающего окна. cssClass: '', // String, Настраиваемое имя CSS класса subTitle: '', // String (optional). Подзаголовок всплывающего окна. template: '', // String (optional). Шаблон HTML, который нужно поместить в тело всплывающего окна. templateUrl: '', // String (optional). Адрес URL шаблона HTML, который нужно поместить в тело всплывающего окна. cancelText: '', // String (default: 'Cancel'). Текст кнопки "Cancel". cancelType: '', // String (default: 'button-default'). Тип кнопки "Cancel". okText: '', // String (default: 'OK'). Текст кнопки "OK". okType: '', // String (default: 'button-positive'). Тип кнопки "OK". }

Возвращает:
object Обещание, которое разрешено, когда всплывающее окно закрыто. Имеет дополнительную
функцию close, которая может быть вызвана с помощью любого значения, чтобы программным образом закрыть всплывающее окно этим значением.

`prompt(options)`

Отображает простое всплывающее окно-подсказку, в котором есть такие элементы, как поле ввода, кнопки OK и Cancel.
Разрешает обещание с помощью значения ввода, если пользователь нажимает "OK", и неопределенным значением (udefined), если пользователь нажимает "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);
 });

Параметр	Тип	Описание
options	объект `object`	Параметры для отображения всплывающего окна-подсказки, имеющего форму: { title: '', // String. Заголовок всплывающего окна. cssClass: '', // String, subTitle: '', // String (optional). Подзаголовок всплывающего окна. template: '', // String (optional). Шаблон HTML, который нужно поместить в тело всплывающего окна. templateUrl: '', // String (optional). Адрес URL шаблона HTML, который нужно поместить в тело всплывающего окна. inputType: // String (default: 'text'). Тип ввода, который нужно использовать defaultText: // String (default: ''). Исходное значение, помещенное в элемент ввода. maxLength: // Integer (default: null). Определяет атрибут maxlength для ввода. inputPlaceholder: // String (default: ''). Поле для заполнения, которое нужно использовать для ввода. cancelText: // String (default: 'Cancel'. Текст кнопки "Cancel". cancelType: // String (default: 'button-default'). Тип кнопки "Cancel". okText: // String (default: 'OK'). Текст кнопки "OK". okType: // String (default: 'button-positive'). Тип кнопки "OK". }

Возвращает:
object Обещание, которое разрешено, когда всплывающее окно закрыто. Имеет дополнительную
функцию close, которая может быть вызвана любым значением для того, чтобы программным способом закрыть всплывающее окно с помощью данного значения.