Question

我的包括：

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。

来自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">&times;</button> 
  </div>
.....
</div>

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

Answer 1

bootstrap javascript使用data-dismiss属性（因为我看到你得到了来自http://getbootstrap.com/javascript/#modals的html源代码）

UI Bootstrap无法绑定到该关闭按钮，因为它没有查找该属性，您需要添加ng-click并关闭模式，如示例所示

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

控制器中的

：

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

模态模板......

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

Answer 2

在角度方面，有一个close $modalInstance方法来关闭打开的模态窗口。

控制器：

  $scope.closeMyPopup = function () {
    $modalInstance.close();
  };

Answer 3

我是这样使用带有Angular的jQuery：

df <- structure(list(Date = c("31/12/1999", "03/01/2000", "04/01/2000", 
"05/01/2000", "06/01/2000", "07/01/2000"), A = c(NA, NA, 79.5, 
79.5, NA, 79.5), B = c(NA, NA, 325, 322.5, NA, 327.5)), .Names = c("Date", 
"A", "B"), class = "data.frame", row.names = c(NA, -6L))

AngularJS - 关闭模态窗口

3 个答案: