我正在将基于 jQuery 的 Web 应用程序迁移到 AngularJS。我无法将bootstrap-modal 插件与 AngularUI Bootstrap 集成。bootstrap-modal 插件提供了一些我需要的功能：全宽模式、响应式设计和可堆叠模式。
我已经在plunker上集成了两者进行了基本尝试。请注意，当窗口宽度较小时，模态显示为全角。但是，如果您弹出 plunker 预览窗口并将窗口宽度增加到 ~979px 以上，则模态框会下降一半页面。我可以在 bootstrap-modal 源代码中看到 CSS 将模态设置为“top：50%”，但是 JS 应该根据模态高度设置负边距顶部，因此模态在中心垂直对齐的页面。JS 没有被正确调用，因此模式向页面底部倾斜。
来自 plunker 的代码片段如下。
HTML：
<div ng-controller="ModalDemoCtrl">
<button class="btn" ng-click="open()">Open me!</button>
<div modal="shouldBeOpen" close="close()" options="opts">
<div class="modal-header">
<button type="button" ng-click="close('edit')" class="close" data-dismiss="modal">x</button>
<h3>I'm a modal!</h3>
</div>
<div class="modal-body">
<ul>
<li ng-repeat="item in items">{{item}}</li>
</ul>
</div>
<div class="modal-footer">
<button class="btn btn-warning cancel" ng-click="close()">Cancel</button>
</div>
</div>
</div>
JavaScript 控制器：
angular.module('plunker', ['ui.bootstrap']);
var ModalDemoCtrl = function ($scope) {
$scope.open = function () {
$scope.shouldBeOpen = true;
};
$scope.close = function () {
$scope.closeMsg = 'I was closed at: ' + new Date();
$scope.shouldBeOpen = false;
};
$scope.items = ['item1', 'item2'];
$scope.opts = {
backdropFade: true,
dialogFade:true
};
};
另一种方法似乎不使用 AngularUI Bootstrap，而只是使用 bootstrap 的常规方法在模态 HTML 中编码。我发现这个jsFiddle在仍然使用 AngularJS 的同时可以做到这一点。如果可能的话，我更喜欢使用 AngularUI 方法。