Ionic-js-modal

イオン-Javascriptモーダル

Ionicモーダルがアクティブになると、コンテンツペインが通常のコンテンツの上に表示されます。 モーダルは基本的に、より多くの機能を備えた大きなポップアップです。 モーダルはデフォルトで画面全体をカバーしますが、必要に応じて最適化できます。

モーダルの使用

Ionicでモーダルを実装するには2つの方法があります。 1つの方法は、個別のテンプレートを追加することであり、もう1つは、 script タグ内の通常のHTMLファイルの上に追加することです。 最初に行う必要があるのは、角度依存性注入を使用してモーダルをコントローラーに接続することです。 次に、モーダルを作成する必要があります。 スコープを渡し、モーダルにアニメーションを追加します。

その後、モーダルを開く、閉じる、破棄する関数を作成します。 最後の2つの関数は、モーダルが非表示または削除された場合にトリガーされるコードを記述できる場所に配置されます。 機能をトリガーしたくない場合、モーダルが削除または非表示になったときに、最後の2つの機能を削除できます。

コントローラコード

.controller('MyController', function($scope, $ionicModal) {
   $ionicModal.fromTemplateUrl('my-modall', {
      scope: $scope,
      animation: 'slide-in-up'
   }).then(function(modal) {
      $scope.modal = modal;
   });

   $scope.openModal = function() {
      $scope.modal.show();
   };

   $scope.closeModal = function() {
      $scope.modal.hide();
   };

  //Cleanup the modal when we're done with it!
   $scope.$on('$destroy', function() {
      $scope.modal.remove();
   });

  //Execute action on hide modal
   $scope.$on('modal.hidden', function() {
     //Execute action
   });

  //Execute action on remove modal
   $scope.$on('modal.removed', function() {
     //Execute action
   });
});

HTMLコード

<script id = "my-modall" type = "text/ng-template">
   <ion-modal-view>
      <ion-header-bar>
         <h1 class = "title">Modal Title</h1>
      </ion-header-bar>

      <ion-content>
         <button class = "button icon icon-left ion-ios-close-outline"
            ng-click = "closeModal()">Close Modal</button>
      </ion-content>
   </ion-modal-view>
</script>

最後の例で示した方法は、 script タグが既存のHTMLファイル内のモーダルのコンテナとして使用される場合です。

2番目の方法は、 templates フォルダー内に新しいテンプレートファイルを作成することです。 前の例と同じコードを使用しますが、 script タグを削除し、コントローラーの fromTemplateUrl を変更して、モーダルを新規作成テンプレートに接続する必要があります。

コントローラコード

.controller('MyController', function($scope, $ionicModal) {
   $ionicModal.fromTemplateUrl('templates/modal-templatel', {
      scope: $scope,
      animation: 'slide-in-up',
   }).then(function(modal) {
      $scope.modal = modal;
   });

   $scope.openModal = function() {
      $scope.modal.show();
   };

   $scope.closeModal = function() {
      $scope.modal.hide();
   };

  //Cleanup the modal when we're done with it!
   $scope.$on('$destroy', function() {
      $scope.modal.remove();
   });

  //Execute action on hide modal
   $scope.$on('modal.hidden', function() {
     //Execute action
   });

  //Execute action on remove modal
   $scope.$on('modal.removed', function() {
     //Execute action
   });
});

HTMLコード

<ion-modal-view>
   <ion-header-bar>
      <h1 class = "title">Modal Title</h1>
   </ion-header-bar>

   <ion-content>
      <button class = "button icon icon-left ion-ios-close-outline"
         ng-click = "closeModal()">Close Modal</button>
   </ion-content>
</ion-modal-view>

Ionicモーダルを使用する3番目の方法は、HTMLをインラインで挿入することです。 fromTemplateUrl の代わりに fromTemplate 関数を使用します。

コントローラコード

.controller('MyController', function($scope, $ionicModal) {
   $scope.modal = $ionicModal.fromTemplate( '<ion-modal-view>' +
      ' <ion-header-bar>' +
         '<h1 class = "title">Modal Title</h1>' +
      '</ion-header-bar>' +

      '<ion-content>'+
         '<button class = "button icon icon-left ion-ios-close-outline"
            ng-click = "closeModal()">Close Modal</button>' +
      '</ion-content>' +

   '</ion-modal-view>', {
      scope: $scope,
      animation: 'slide-in-up'
   })

   $scope.openModal = function() {
      $scope.modal.show();
   };

   $scope.closeModal = function() {
      $scope.modal.hide();
   };

  //Cleanup the modal when we're done with it!
   $scope.$on('$destroy', function() {
      $scope.modal.remove();
   });

  //Execute action on hide modal
   $scope.$on('modal.hidden', function() {
     //Execute action
   });

  //Execute action on remove modal
   $scope.$on('modal.removed', function() {
     //Execute action
   });
});

3つの例はすべて同じ効果があります。 * $ ionicModal.show（）*をトリガーしてモーダルを開くボタンを作成します。

HTMLコード

<button class = "button" ng-click = "openModal()"></button>

モーダルを開くと、モーダルを閉じるために使用されるボタンが含まれます。 このボタンをHTMLテンプレートに作成しました。

イオンモード

モーダル最適化には他のオプションもあります。 scope と animation の使用方法は既に示しました。 次の表に、他のオプションを示します。

Option	Type	Detail
focusFirstInput	boolean	It will auto focus first input of the modal.
backdropClickToClose	boolean	It will enable closing the modal when backdrop is tapped. Default value is true.
hardwareBackButtonClose	boolean	It will enable closing the modal when hardware back button is clicked. Default value is true.