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'); };并查看是否在控制台中单击该按钮有效。
另一件事，离子模态docs http://ionicframework.com/docs/api/service/ $ ionicModal /

我认为模态页面应该包含在离子模式视图容器中：

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

离子模态不会打开

2 个答案: