如何以角度关闭模态？答案

【问题标题】：How to close a modal in angular?如何以角度关闭模态？
【发布时间】：2017-06-19 19:30:59
【问题描述】：

我能够以角度打开模态并使用 ng-show 显示和隐藏某些 div。在模式内部切换，但是当我尝试关闭模式时。它只是从页面中消失，但不会从 html 中删除。我可以在浏览器的检查元素中看到模式。这将页面挂起。页面变得无响应，我无法单击页面上的任何其他按钮或链接。我尝试了很多链接，但没有任何效果。我做错了什么吗。请在这里帮助我。 :( 下面是我使用 angular 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>

【问题讨论】：

标签： jquery angularjs twitter-bootstrap modal-dialog

【解决方案1】：

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

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

请看这个演示。

【讨论】：