Question

我有一个简单的模态表单来评论。单击“提交”按钮或“关闭”按钮时，模式窗体应该关闭，但它不会关闭。

以下是我的控制器的代码片段：

 $ionicModal.fromTemplateUrl('templates/sharing-comment.html', {
    scope: $scope
 }).then(function (modal) {
    $scope.commentForm = modal;
 });

 // Triggered in the comment modal to close it
 $scope.closeCommentForm = function () {
    $scope.commentForm.hide();
 };

 // Open the comment modal
 $scope.showCommentForm = function () {
    $scope.commentForm.show();
    $scope.popover.hide();
 };

 The following is code snippet from my modal form:
 <ion-modal-view>
 <ion-header-bar>
 <h1 class="title">Submit Comment on Sharing</h1>
 <div class="buttons">
   <button class="button button-clear" ng-
 click="closeCommentForm()">Close</button>  
 </div>
 </ion-header-bar>
 <ion-content>
 <form id="commentForm" name="commentForm" ng-submit="submitComment()">
  <div class="list">
    <label class="item item-input">
      <span class="input-label">Your Comment</span>
      <textarea type="text" ng-model="mycomment.comment"></textarea>
    </label>
    <label class="item">
      <button class="button button-block button-positive" 
 type="submit">Submit</button>
    </label>
  </div>
 </form>
 </ion-content>
 </ion-modal-view>

Answer 1

试试这个，我为你制作了codepen

＆＃13;

angular.module('ionicApp', ['ionic'])

.controller('AppCtrl', function($scope, $ionicModal) {
  

  $ionicModal.fromTemplateUrl('templates/modal.html', {
    scope: $scope
  }).then(function(modal) {
    $scope.commentForm = modal;
  });
  
  $scope.createContact = function() {       
    $scope.commentForm.hide();
  };

});

＆＃13;

<html ng-app="ionicApp">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width"> 
    
    <title>Ionic Modal</title>

    <link href="//code.ionicframework.com/nightly/css/ionic.css" rel="stylesheet">
    <script src="//code.ionicframework.com/nightly/js/ionic.bundle.js"></script>
  </head>
  <body ng-controller="AppCtrl">
    
    <ion-header-bar class="bar-positive">
      <h1 class="title">Contacts</h1>
      <div class="buttons">
        <button class="button button-icon ion-compose" ng-click="commentForm.show()">
        </button>
      </div>
    </ion-header-bar>

    <script id="templates/modal.html" type="text/ng-template">
      <ion-modal-view>
        <ion-header-bar class="bar bar-header bar-positive">
          <h1 class="title">New Contact</h1>
          <button class="button button-clear button-primary" ng-click="commentForm.hide()">Cancel</button>
        </ion-header-bar>
        <ion-content class="padding">
          <div class="list">
            <label class="item item-input">
              <span class="input-label">First Name</span>
              <input ng-model="newUser.firstName" type="text">
            </label>
            <label class="item item-input">
              <span class="input-label">Last Name</span>
              <input ng-model="newUser.lastName" type="text">
            </label>
            <label class="item item-input">
              <span class="input-label">Email</span>
              <input ng-model="newUser.email" type="text">
            </label>
            <button class="button button-full button-positive" ng-click="createContact(newUser)">Create</button>
          </div>
        </ion-content>
      </ion-modal-view>
    </script>
    
  </body>
</html>

＆＃13;

我的离子莫代尔无法关闭

1 个答案: