Ionic-js-popover

イオン-Javascript Popover

これは、通常のビューの上に表示されるビューです。

ポップオーバーの使用

Popionは、 ion-popover-view 要素を使用して作成できます。 この要素をHTMLテンプレートに追加し、 $ ionicPopover サービスをコントローラーに挿入する必要があります。

ポップオーバーを追加するには3つの方法があります。 1つ目は fromTemplate メソッドで、インラインテンプレートを使用できます。 ポップオーバーを追加する2番目と3番目の方法は、 fromTemplateUrl メソッドを使用することです。

以下で説明する fromtemplate メソッドを理解しましょう。

Fromtemplateメソッドのコントローラーコード

.controller('DashCtrl', function($scope, $ionicLoading, $ionicPopover) {
  //.fromTemplate() method
   var template = '<ion-popover-view>' + '<ion-header-bar>' +
      '<h1 class = "title">Popover Title</h1>' +
      '</ion-header-bar>'+ '<ion-content>' +
      'Popover Content!' + '</ion-content>' + '</ion-popover-view>';

   $scope.popover = $ionicPopover.fromTemplate(template, {
      scope: $scope
   });

   $scope.openPopover = function($event) {
      $scope.popover.show($event);
   };

   $scope.closePopover = function() {
      $scope.popover.hide();
   };

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

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

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

上記で説明したように、ポップオーバーを追加する2番目と3番目の方法は、 fromTemplateUrl メソッドを使用することです。 コントローラーコードは、 fromTemplateUrl 値を除いて、両方の方法で同じです。

HTMLが既存のテンプレートに追加される場合、URLは popoverl になります。 HTMLをテンプレートフォルダーに配置する場合、URLは templates/popoverl に変更されます。

両方の例を以下に説明しました。

fromTemplateUrlのコントローラーコード

.controller('MyCtrl', function($scope, $ionicPopover) {

   $ionicPopover.fromTemplateUrl('popoverl', {
      scope: $scope
   }).then(function(popover) {
      $scope.popover = popover;
   });

   $scope.openPopover = function($event) {
      $scope.popover.show($event);
   };

   $scope.closePopover = function() {
      $scope.popover.hide();
   };

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

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

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

次に、HTMLファイルにテンプレート付きの script を追加します。これは、ポップオーバー関数の呼び出しに使用します。

既存のHTMLファイルからのHTMLコード

<script id = "popoverl" type = "text/ng-template">
   <ion-popover-view>

      <ion-header-bar>
         <h1 class = "title">Popover Title</h1>
      </ion-header-bar>

      <ion-content>
         Popover Content!
      </ion-content>

   </ion-popover-view>
</script>

HTMLを別のファイルとして作成する場合は、 templates フォルダーに新しいHTMLファイルを作成し、 script タグなしで上記の例で使用したものと同じコードを使用できます。

新しく作成されたHTMLファイルは次のとおりです。

<ion-popover-view>
   <ion-header-bar>
      <h1 class = "title">Popover Title</h1>
   </ion-header-bar>

   <ion-content>
      Popover Content!
   </ion-content>
</ion-popover-view>

最後に必要なことは、ポップオーバーを表示するためにクリックされるボタンを作成することです。

<button class = "button" ng-click = "openPopover($event)">Add Popover</button>

上記の例からどのように選択しても、出力は常に同じになります。

Popover Js

次の表は、使用できる $ ionicPopover メソッドを示しています。

Method	Option	Type	Detail
initialize(options)	scope, focusFirst, backdropClickToClose, hardwareBackButtonClose	object, boolean, boolean, boolean	Scope *is used to pass custom scope to popover. Default is the $rootScope. focusFirstInput is used to auto focus the first input of the popover. backdropClickToClose is used to close popover when clicking the backdrop. hardwareBackButtonClose* is used to close popover when hardware back button is pressed.
show($event)	$event	promise	Resolved when popover is finished showing.
hide()	/	promise	Resolved when popover is finished hiding.
remove()	/	promise	Resolved when popover is finished removing.
isShown()	/	Boolean	Returns true if popover is shown or false if it is not.