离子模态没有显示

Question

我的离子模态视图不会显示出来.屏幕不知何故会变成灰色,但它没有显示模态.

我想知道什么是错的.

这是我的代码: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>

莫代尔:

<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('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();
    });

  })

窗口将变为灰色,但没有模态.

感谢帮助!

(在Mac上的Safari浏览器中试过)

Answer 1

将你的模态包含在内<ion-modal-view>而不是<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>

文档详细信息.