离子模态打不开

Question

我最近尝试创建一个离子模式。我首先查看了在互联网上找到的多个示例，但我无法让它们正常工作。有人可以告诉我哪里出错了吗？提前致谢:)

调用模态：

<button class="ion-ios-information-outline button button-clear" ng-click="openModal()"></button>

JS:

angular.module('Mob').controller('TeamCtrl', function($scope, $ionicModal) {

  /* Modal */
$ionicModal.fromTemplateUrl('intro-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();
  });
};

模态页面：

<script id="intro-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>

Answer 1

有些事情你应该检查：

控制器实例化了吗？函数是从视图中的控制器内部调用的吗？能调用成功调用其他函数吗？尝试在那里添加另一个按钮，使用 ng-click="test()" 并在控制器中添加 $scope.test = function () { console.log('it works'); }; 并查看单击该按钮是否在控制台中有效。
另一件事，离子模式文档 http://ionicframework.com/docs/api/service/$ionicModal/

我认为模态页面应该包裹在 ion-modal-view 容器中：

<script id="my-modal.html" type="text/ng-template">
  <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>
</script>

Answer 2

尝试删除

<script id="my-modal.html" type="text/ng-template">

模板的标签，只保留 html 模板中的内容，正如@wiherek 所说，使用离子模式视图。

所以你的 my-modal.html 模板应该像这样结束：

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

离子模态打不开

Ionic modal won't open

html

javascript

modal-dialog

popup

angularjs