Question

我想在第一个模态窗口中点击链接时打开另一个模态窗口。当点击忘记密码时，我想打开另一个模态窗口forgotpassword.html 我试着用modal JS来解决。这是代码：

IONIC html

<ion-modal-view>
  <ion-header-bar>
    <h1 class="title">Login</h1>
    <div class="buttons">
      <button class="button button-clear" ng-click="closeLogin()"> <i class="icon ion-close-round"></i></button>
    </div>
  </ion-header-bar>
  <ion-content>
    <form ng-submit="doLogin()">
      <div class="list">
        <label class="item item-input">
          <span class="input-label">Username</span>
          <input type="text" ng-model="loginData.username">
        </label>
        <label class="item item-input">
          <span class="input-label">Password</span>
          <input type="password" ng-model="loginData.password">
        </label>
        <label class="item borderbottomnone">
          <button class="button button-block button-positive" type="submit">Log in</button>
          <span class="loginforgotpassword"><a ng-controller='MainCtrl' ng-click="openModal()">>Forgot password</a></span>
          <span class="loginregister"><a href="#">REGISTER</a></span>
        </label>
      </div>
    </form>
  </ion-content>
</ion-modal-view>

JS

app.controller('MainCtrl', function($scope, $ionicModal) {
  $scope.contact = {
    name: 'Mittens Cat',
    info: 'Tap anywhere on the card to open the modal'
  }

  $ionicModal.fromTemplateUrl('forgotpassword.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();
  });
})

Answer 1

有可能您的modal对象被父模态对象覆盖，因此更改模态对象名称就像这样

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

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

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

为什么我不能在Ionic中打开另一个模态窗口

1 个答案: