如何在角度中关闭模态？

我可以打开角度模式，并使用ng-show来显示和隐藏某些div。在模态内切换，但是当我尝试关闭模态时。它只是从页面中消失，但不会从html中移除。我可以在浏览器的检查元素中看到该模式。这吊起了页面。页面无响应，我无法点击页面上的任何其他按钮或链接。我尝试了很多链接，但没有任何工作。我做错了什么吗？请在这里帮助我。 :(下面是我的代码，我使用的角度1.5.6如何在角度中关闭模态？

//my parent controller to call modal 
 

 
(function() { 
 
    var app = angular.module("formModule", ['ngRoute']); 
 
    app.controller("formController", function($scope,$http,$rootScope,$location,ModalService) { 
 
    $scope.BookNow= function() { 
 

 
     ModalService.showModal({ 
 
     templateUrl: "views/feature.html", 
 
     controller: "featureController" 
 
     }) 
 
     .then(function(modal) { 
 
      modal.element.modal(); 
 
      modal.close.then(function(result) { 
 
       console.log(result); 
 
      }); 
 
     }); 
 
    } 
 
}); 
 
})(); 
 

 
// my modal controller 
 
(function() { 
 
    var app = angular.module("featureModule", ['ngRoute','ngAnimate']); 
 
    app.controller("featureController", function($scope,$http,$rootScope,close,ModalService) { 
 
    $scope.fea=true; 
 
    
 
    $scope.close = function(result) { 
 
     ModalService.close(result,500); // close, but give 500ms for 
 
    } 
 

 
    $scope.calendar=function() { 
 
     $scope.fea=!$scope.fea; 
 
     $scope.cal=!$scope.cal; 
 
    } 
 
    }); 
 
})();

<div class="modal fade" id="modala" > 
 
    <div class="modal-dialog"> 
 
     <div class="modal-content"> 
 
     <div class="modal-header"> 
 
      <button type="button" class="close" ng-click="close(-1)" aria-hidden="true">&times;</button> 
 
     </div> 
 

 
     <div class="modal-body" ng-show="fea" > 
 
      <h2 class="modal-title" id="myModalLabel_3">Select Features</h2> 
 
     </div> 
 

 
     <div class="modal-body" ng-show="cal" > 
 
      <h2 class="modal-title" class="ss" id="myModalLabel_3">Select Date & Time</h2> 
 
     </div> 
 

 
     <div class="modal-footer"> 
 
      <div class="inner_read_more modal_btn_1"> 
 
       <a class="showSingle_1" ng-click="calendar()" >Next <i class="fa fa-arrow-circle-right" aria-hidden="true"></i></a> 
 
      </div> 
 
     </div> 
 
     </div> 
 
    </div> 
 
</div>

来源

2017-06-19 nimra asad

angular.module('myApp', []) 
 
    .controller('myController', function($scope) { 
 
    $scope.close = function(){ 
 
\t alert('do something!'); 
 
    $('#myModal').modal('hide') 
 
\t } 
 
\t 
 
    });

<html ng-app="myApp"> 
 

 
<head> 
 
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.18/angular.js"></script> 
 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
    <script type="text/javascript" src="app.js"></script> 
 
    <title>Angular-Google-Charts Example</title> 
 
</head> 
 

 
<body> 
 

 
<div class="container"> 
 
    <h2>Modal Example</h2> 
 
    <!-- Trigger the modal with a button --> 
 
    <button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button> 
 

 
    <!-- Modal --> 
 
    <div class="modal fade" id="myModal" role="dialog"> 
 
    <div class="modal-dialog"> 
 
    
 
     <!-- Modal content--> 
 
     <div class="modal-content"> 
 
     <div class="modal-header"> 
 
      <button type="button" class="close" data-dismiss="modal">&times;</button> 
 
      <h4 class="modal-title">Modal Header</h4> 
 
     </div> 
 
     <div class="modal-body"> 
 
      <p>Some text in the modal.</p> 
 
     </div> 
 
     <div class="modal-footer" ng-controller="myController"> 
 
      <button type="button" class="btn btn-default" ng-click="close()">Close</button> 
 
     </div> 
 
     </div> 
 
     
 
    </div> 
 
    </div> 
 
    
 
</div> 
 

 
</body> 
 

 
</html>

请参阅本演示。

来源

2017-06-20 06:33:07

如何在角度中关闭模态？

回答

相关问题