如何将引导模式插件与AngularUI引导程序集成

Question

我正在将一个基于jQuery的web应用程序迁移到AngularJS。我很难将自举模式插件与AngularUI引导集成在一起。引导模式插件提供了一些我需要的特性:全宽度调制解调器、响应设计和可叠加的调制解调器。

我已经对在柱塞上集成这两者做了一个基本尝试。请注意，当窗口宽度较小时，模态显示为全宽度。但是，如果您弹出柱塞预览窗口并将窗口宽度增加到979 if以上，则模式会下降一半。我可以在引导模式源代码中看到，CSS将模态设置为"top: 50%“，但是JS应该根据模态高度设置一个负的边距顶，从而使模态在页面的中心垂直对齐。JS没有被正确地调用，所以模式向页面底部倾斜。

下面是柱塞中的代码片段。

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引导，而只是使用引导程序的正常方法在模态HTML中使用代码。我发现这个jsFiddle在仍然使用AngularJS的时候正是这样做的。如果可能的话，我更愿意使用AngularUI方法。

Answer 1

检查ngEkathuwa模式服务

引导模式未显示

Answer 2

问题在于您的引导-modal.css响应部分：@media (最大宽度:979 in ){.}，如果您不想要它，那么直接修改它，从(最大宽度到最小宽度)，或者只是复制代码的那一段，然后在html中重写它。