我的離子莫代爾不能關閉

我有一個簡單的模態形式來獲得評論。當提交按鈕或關閉按鈕被點擊時，模式窗體應該關閉，但它不。我的離子莫代爾不能關閉

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

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

來源

2017-04-11 lim

試試這個，我做了codepen你

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(); 
 
    }; 
 

 
});

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

來源

2017-04-11 07:15:27 k185

我的離子莫代爾不能關閉

回答

相關問題