AngularJS-关闭模态窗口 [英] AngularJS - Closing Modal Window
问题描述
我的包括:
bootstrap.css [ getbootstrap.com/2.3.2 ]
angular/ui-bootstrap-tpls-0.10.0.min.js from: [ angular-ui.github.io/bootstrap ]
我正在使用AngularJS和Twitter Bootstrap.
I am using AngularJS and Twitter Bootstrap.
在AngularJS中,我打开模态窗口,如下所示:
var modalInstance = $modal.open({
templateUrl: 'resources/html/mymodal.html',
controller: 'mymodalController',
scope: $scope
});
我的模态模板是:
<div class="modal">
<
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
</div>
.....
</div>
问题:
关闭[x]按钮不起作用
当我单击它时,模态不会消失.但是当我按Esc键时,模态消失了.
因此,看起来... data-dismiss ="modal"无法正常工作.有什么想法吗?
Question:
The close [x] button is not working
When I click on it, the modal does not go away. But when I press Esc - the modal vanishes.
So looks like ... data-dismiss="modal" is not working. Any ideas?
推荐答案
bootctrap javascript使用data-dismiss
属性(如我所见,您从
the data-dismiss
attribute is used by the bootstrap javascript (as I see you got the html source code from, http://getbootstrap.com/javascript/#modals )
UI Bootstrap不会绑定到该关闭按钮,因为它不在寻找该属性,您需要添加ng-click并关闭示例中的模态
UI Bootstrap won't be binding to that close button because it isn't looking for that attribute, you need to add an ng-click and dismiss the modal like in the examples
http://angular-ui.github.io/bootstrap/#/modal
在控制器中:
$scope.cancel = function () {
$modalInstance.dismiss('cancel');
};
模式模板...
<button class="btn btn-warning" ng-click="cancel()">Cancel</button>
这篇关于AngularJS-关闭模态窗口的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!