Ionic-js-popup

Ionic-JavaScriptポップアップ

このサービスは、ユーザーとの対話に使用される通常のビューの上にポップアップウィンドウを作成するために使用されます。 4種類のポップアップがあります- show 、 confirm 、 alert 、 prompt 。

ポップアップを表示する

このポップアップはすべての中で最も複雑です。 ポップアップをトリガーするには、コントローラーに $ ionicPopup サービスを挿入し、使用するポップアップをトリガーするメソッド（この場合は* $ ionicPopup.show（））を追加するだけです。 * onTap（e）*関数を使用して e.preventDefault（）*メソッドを追加できます。これは、入力に変更が適用されていない場合にポップアップを開いたままにします。 ポップアップが閉じられると、約束されたオブジェクトは解決されます。

コントローラコード

.controller('MyCtrl', function($scope, $ionicPopup) {
  //When button is clicked, the popup will be shown...
   $scope.showPopup = function() {
      $scope.data = {}

     //Custom popup
      var myPopup = $ionicPopup.show({
         template: '<input type = "text" ng-model = "data.model">',
         title: 'Title',
         subTitle: 'Subtitle',
         scope: $scope,

         buttons: [
            { text: 'Cancel' }, {
               text: '<b>Save</b>',
               type: 'button-positive',
               onTap: function(e) {

                  if (!$scope.data.model) {
                    //don't allow the user to close unless he enters model...
                     e.preventDefault();
                  } else {
                     return $scope.data.model;
                  }
               }
            }
         ]
      });

      myPopup.then(function(res) {
         console.log('Tapped!', res);
      });
   };
})

HTMLコード

<button class = "button" ng-click = "showPopup()">Add Popup Show</button>

Ionic Popup Show

おそらく、上記の例でいくつかの新しいオプションが使用されていることに気づいたでしょう。 次の表では、これらのオプションとそのユースケースをすべて説明します。

ポップアップオプションを表示

Option	Type	Details
template	string	Inline HTML template of the popup.
templateUrl	string	URL of the HTML template.
title	string	The title of the popup.
subTitle	string	The subtitle of the popup.
cssClass	string	The CSS class name of the popup.
scope	Scope	A scope of the popup.
buttons	Array[Object]	Buttons that will be placed in footer of the popup. They can use their own properties and methods. text *is displayed on top of the button, type is the Ionic class used for the button, onTap* is function that will be triggered when the button is tapped. Returning a value will cause the promise to resolve with the given value.

ポップアップの確認の使用

Confirm Popupは、Ionicポップアップのよりシンプルなバージョンです。 ユーザーには、キャンセルボタンとOKボタンを押して、対応する機能をトリガーできます。 いずれかのボタンが押されたときに解決される約束されたオブジェクトを返します。

コントローラコード

.controller('MyCtrl', function($scope, $ionicPopup) {
  //When button is clicked, the popup will be shown...
   $scope.showConfirm = function() {
       var confirmPopup = $ionicPopup.confirm({
         title: 'Title',
         template: 'Are you sure?'
      });

      confirmPopup.then(function(res) {
         if(res) {
            console.log('Sure!');
         } else {
            console.log('Not sure!');
         }
      });
    };
})

HTMLコード

<button class = "button" ng-click = "showConfirm()">Add Popup Confirm</button>

Ionic Popup Confirm

次の表は、このポップアップに使用できるオプションを説明しています。

ポップアップオプションの確認

Option	Type	Details
template	string	Inline HTML template of the popup.
templateUrl	string	URL of the HTML template.
title	string	The title of the popup.
subTitle	string	The subtitle of the popup.
cssClass	string	The CSS class name of the popup.
cancelText	string	The text for the Cancel button.
cancelType	string	The Ionic button type of the Cancel button.
okText	string	The text for the OK button.
okType	string	The Ionic button type of the OK button.

アラートポップアップの使用

アラートは、アラート情報をユーザーに表示するために使用される単純なポップアップです。 ポップアップを閉じて、ポップアップの約束されたオブジェクトを解決するために使用されるボタンは1つだけです。

コントローラコード

.controller('MyCtrl', function($scope, $ionicPopup) {
   $scope.showAlert = function() {
      var alertPopup = $ionicPopup.alert({
         title: 'Title',
         template: 'Alert message'
      });

      alertPopup.then(function(res) {
        //Custom functionality....
      });
   };
})

HTMLコード

<button class = "button" ng-click = "showAlert()">Add Popup Alert</button>

それは次の画面を生成します-

Ionic Popup Alert

次の表に、アラートポップアップに使用できるオプションを示します。

アラートポップアップオプション

Option	Type	Details
template	string	Inline HTML template of the popup.
templateUrl	string	URL of the HTML template.
title	string	The title of the popup.
subTitle	string	The subtitle of the popup.
cssClass	string	The CSS class name of the popup.
okText	string	The text for the OK button.
okType	string	The Ionic button type of the OK button.

プロンプトポップアップの使用

Ionicを使用して作成できる最後のIonicポップアップは prompt です。 入力からの値でプロミスを解決する[OK]ボタンと、未定義の値で解決する[キャンセル]ボタンがあります。

コントローラコード

.controller('MyCtrl', function($scope, $ionicPopup) {
   $scope.showPrompt = function() {
      var promptPopup = $ionicPopup.prompt({
         title: 'Title',
         template: 'Template text',
         inputType: 'text',
         inputPlaceholder: 'Placeholder'
      });

      promptPopup.then(function(res) {
         console.log(res);
      });
   };
})

HTMLコード

<button class = "button" ng-click = "showPrompt()">Add Popup Prompt</button>

それは次の画面を生成します-

Ionic Popup Prompt

次の表に、プロンプトポップアップに使用できるオプションを示します。

プロンプトポップアップオプション

Option	Type	Details
template	string	Inline HTML template of the popup.
templateUrl	string	URL of the HTML template.
title	string	The title of the popup.
subTitle	string	The subtitle of the popup.
cssClass	string	The CSS class name of the popup.
inputType	string	The type for the input.
inputPlaceholder	string	A placeholder for the input.
cancelText	string	The text for the Cancel button.
cancelType	string	The Ionic button type of the Cancel button.
okText	string	The text for the OK button.
okType	string	The Ionic button type of the OK button.