Twitter bootstrap 使用angularstrap创建不同大小的模态？

我将angularstrap用于模式框，我注意到模板没有parent.modal容器。这就引出了我的问题。当我无法为该模态框包装器添加类或id时，如何对不同的模态框进行不同的样式设置（包括大小）

似乎我只能为已经存在的类设置样式，这意味着我的所有样式都应用于每个单独的模态框，当我有完全不同的样式的不同模态框时，这是不好的

安格拉斯

   <div class="modal-header">
      <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
      <h3>Modal header</h3>
    </div>
    <div class="modal-body">

    </div>
    <div class="modal-footer">
      <button type="button" class="btn" ng-click="dismiss()">Close</button>
      <button class="btn btn-primary" ng-click="modal.saved=true;dismiss()">Save changes</button>
    </div>

×
模态头
接近
保存更改

引导示例：

<div class="modal hide fade">
  <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
    <h3>Modal header</h3>
  </div>
  <div class="modal-body">
    <p>One fine body…</p>
  </div>
  <div class="modal-footer">
    <a href="#" class="btn">Close</a>
    <a href="#" class="btn btn-primary">Save changes</a>
  </div>
</div>

&时代；
模态头
一个好身体

---

Angularstrap模态部分：

最近在处理一个项目时，为了添加一些自定义css，我在模板中的现有模态对话框中添加了一个ng类

 <div class="modal-dialog" ng-class="{'wide-modal':modal.wide === true}">

然后，每当我启动一个模式并想要自定义大小的模式时，我都会在作用域中添加一个变量

modal.wide = true;

模式中的滚动条

如果我的模态内容对于模态来说太多了，那么我通过将这个css添加到.modal主体来添加滚动

.modal-body {
    max-height: 420px;
    overflow-y: auto;
}

---

我是通过在控制器的每个负载上创建一个jquery修改来实现的，该修改是对modal中包含的元素的父元素进行的。这样，当控制器通过模态内部的元素加载时，我可以针对每个通用模态，如：

setTimeout(function(){
      $('#login').parent().css({
        "width":"562px",
        "margin-left":"-281px",
        "overflow":"auto",
        "border-radius":"7px"
      });
    },50);

---

为加载dom提供角度时间是一个超时。我能想到的任何其他解决方案都涉及修改引导ui库。它确实应该允许您将类或ID传递给模式框，但这是可行的。

我最终删除了angularstrap模式框，因为它会根据您调用同一模式框的次数将一个新模式框注入到页面中。因此，很明显，如果您每次列出缩略图时都调用它，最终会超出调用堆栈的大小。除了无法创建单独大小的模态框（如上所述）之外。这两个问题导致我选择了另一个替代方案。问题是，如果需要使模态更大，则需要修改父模态类上存在的剩余裕度，并保持模态居中。在angularstrap遇到其他问题后，我用AngularUI替换了它。这对我不适用。可能是因为我是从HTML模板加载的，而不是在HTML正文中加载的。

setTimeout(function(){
      $('#login').parent().css({
        "width":"562px",
        "margin-left":"-281px",
        "overflow":"auto",
        "border-radius":"7px"
      });
    },50);