Ionic modal not showing

Question

my ionic modal view will not show up. The screen somehow will turn gray, but it doesn't show a modal.

I'm wondering what's wrong.

This is my code: Orignial view:

<ion-header-bar class="bar-energized">
  <h1 class="title">Contact Info</h1>
</ion-header-bar>
<ion-content>
  <div class="card" ng-controller='DashCtrl' ng-click="openModal()">
    <div class="item item-divider">
      {{contact.name}}
    </div>
    <div class="item item-text-wrap">
      {{contact.info}}
    </div>
  </div>
</ion-content>

Modal:

<script id="templates/contact-modal.html" type="text/ng-template">
  <div class="modal">
    <ion-header-bar>
      <h1 class="title">Edit Contact</h1>
    </ion-header-bar>
    <ion-content>
      <div class="list">
        <label class="item item-input">
          <span class="input-label">Name</span>
          <input type="text" ng-model="contact.name">
        </label>
        <label class="item item-input">
          <span class="input-label">Info</span>
          <input type="text" ng-model="contact.info">
        </label>
      </div>

      <button class="button button-full button-energized" ng-click="closeModal()">Done</button>
    </ion-content>
  </div>
</script>

Controller:

.controller('DashCtrl', function($scope, $ionicModal) {

    $scope.contact = {
      name: 'Mittens Cat',
      info: 'Tap anywhere on the card to open the modal'
    }

    $ionicModal.fromTemplateUrl('templates/contact-modal.html', {
      scope: $scope,
      animation: 'slide-in-up'
    }).then(function(modal) {
      $scope.modal = modal
    })

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

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

    $scope.$on('$destroy', function() {
      $scope.modal.remove();
    });

  })

The window will turn gray, but there is no modal.

Thanks for help!

(Tried in Safari browser on Mac)

Answer 1

Enclose your modal into <ion-modal-view> instead of <div class="modal">

<ion-modal-view >
    <ion-header-bar>
      <h1 class="title">Edit Contact</h1>
    </ion-header-bar>
    <ion-content>
          <div class="list">
            <label class="item item-input">
              <span class="input-label">Name</span>
              <input type="text" ng-model="contact.name">
            </label>
            <label class="item item-input">
              <span class="input-label">Info</span>
              <input type="text" ng-model="contact.info">
            </label>
          </div>

          <button class="button button-full button-energized" ng-click="closeModal()">Done</button>
    </ion-content>
 </ion-modal-view>

Documentation for detail.

Answer 2

A small update:

In the current version (mine is 1.7.7) you have to use the wrapping <ion-modal-view >, but must not use the wrapping <script>-tag! Otherwise you will only get a dark overlay but not the modal-window!