我可以在角度打开模态并使用ng-show来显示和隐藏一些div。在模态内部切换,但是当我尝试关闭模态时。它只是从页面中消失,但不会从html中删除。我可以在浏览器的inspect元素中看到模态。这是HANGS的页面。页面无响应,我无法单击页面上的任何其他按钮或链接。我尝试了很多链接,但没有任何工作。我做错了什么。请帮帮我。 :(下面是我的代码我使用角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">×</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>
答案 0 :(得分:0)
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">×</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>
请参阅此演示。