Question

我的离子模态视图不会显示出来。屏幕会以某种方式变成灰色，但它不会显示模态。

我想知道出了什么问题。

这是我的代码：原始观点：

<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>

Documentation了解详情。

Answer 2

一个小小的更新：

在当前版本（我的是1.7.7）中，你必须使用包裹<ion-modal-view >，但不能使用包装<script> - 标签！否则你只会得到一个黑暗的叠加而不是模态窗口！

Answer 3

没有脚本标签，它在离子版1.3.0中工作

离子模态没有显示

3 个答案: