AngularJS - 关闭模态窗口 [英] AngularJS - Closing Modal Window

问题描述

我的包括:

bootstrap.css [ getbootstrap.com/2.3.2 ]angular/ui-bootstrap-tpls-0.10.0.min.js 来自:[angular-ui.github.io/bootstrap]

我正在使用 AngularJS 和 Twitter Bootstrap.

从 AngularJS 我打开模态窗口如下:

var modalInstance = $modal.open({templateUrl: 'resources/html/mymodal.html',控制器:'mymodalController'，范围:$范围});

我的模态模板是:

<<div class="modal-header"><button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
.....

问题:
关闭 [x] 按钮不起作用
当我点击它时，模态不会消失.但是当我按 Esc 时 - 模态消失了.
所以看起来...... data-dismiss="modal" 不起作用.有什么想法吗?

解决方案

data-dismiss 属性由 bootstrap javascript 使用(如我所见，您从 http://getbootstrap.com/javascript/#modals )

UI Bootstrap 不会绑定到那个关闭按钮，因为它不是在寻找那个属性，你需要像例子中那样添加一个 ng-click 并关闭模式

http://angular-ui.github.io/bootstrap/#/modal

在控制器中:

$scope.cancel = function () {$modalInstance.dismiss('cancel');};

模态模板...

Cancel

My includes are:

bootstrap.css [ getbootstrap.com/2.3.2 ]
angular/ui-bootstrap-tpls-0.10.0.min.js from: [ angular-ui.github.io/bootstrap ]

I am using AngularJS and Twitter Bootstrap.

From AngularJS I open the modal window as follows:

var modalInstance = $modal.open({
              templateUrl: 'resources/html/mymodal.html',
              controller: 'mymodalController',
              scope: $scope
            });

My Modal Template is:

<div class="modal">
<
  <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button> 
  </div>
.....
</div>

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?

解决方案

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

in controller:

$scope.cancel = function () {
    $modalInstance.dismiss('cancel');
};

Modal template...

<button class="btn btn-warning" ng-click="cancel()">Cancel</button>

这篇关于AngularJS - 关闭模态窗口的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！