ionic(cordova)にて$ionicPopupをカスタマイズしてモーダルを作る

今回やりたかったのはこんな感じの画面。
初めはionicModalのサイズを変えてやろうとしていたのだが、モーダルのサイズを中のテキストとかにあわせてリサイズするのを自前で実装するのが手間でした。
で、少し調べたらionicPopupをカスタマイズしたら簡単にできたのでその手順をメモ。

ionic-close-popup をインストール

ポップアップの外をタップしたらポップアップを閉じるのを簡単に実現できるライブラリ。
https://github.com/mvidailhet/ionic-close-popup

インストール

$ bower install ionic-close-popup

index.htmlで読み込む

<script src="lib/ionic-close-popup/ionic-close-popup.js"></script>

ポップアップ画面を用意

ていっても今回はこれだけ

templates/custome_popup.html

Custom Popup!!

ポップアップを呼び出す

コントローラー

・・・
  .controller('DashCtrl', function(
    $scope,
    $ionicPopup,
    IonicClosePopupService
  ) {

    var popup = null;

    $scope.showPopup = function() {
      popup = $ionicPopup.alert({
        scope: $scope,
	cssClass: "custom-popup", // ★ 見た目をカスタマイズするためにCSSのクラスを追加
        templateUrl: "templates/custom_popup.html"
      });
      IonicClosePopupService.register(popup);
    };
  })
・・・

テンプレート

<ion-view view-title="Dashboard">
  <ion-content class="padding">
    <a ng-click="showPopup()">ポップアップOPEN</a>
  </ion-content>
  <style>                                                                                                                                                                                                          
  <!-- ポップアップサイズを指定することも可能 -->                                                                                                                                                                  
   .custom-popup .popup {
       width: 86%;
       height: 90%;
   }
   <!-- デフォルトで用意されているボタンとヘッダー部分を非表示に -->
   .custom-popup .popup-head,                                                                                                                                                                                      
   .custom-popup .popup-buttons {
       display:none;
   }
  </style>
</ion-view>

これだけでいけた。以上です