angularjs - Angular UI Bootstrap Modal 去除 id 和 class 属性

Question

现场示例

添加以下Angular UI Bootstrap 模式：

<div id="my-id" class="my-class" modal="opened">
  <p>Modal Here</p>
</div>

结果是：

<div class="modal ng-scope">
  <p>Modal Here</p>
</div>

为什么id和class属性被剥离？

我想在对话框上设置一些 CSS 样式，例如对话框的宽度，或者为一些对话框的内部元素设置样式。我怎么能做到这一点？

Answer 1

因为我自己刚刚遇到了这个恼人的问题，并且文档和默认行为并不明显。您现在可以使用以下windowClass选项通过 $modal.open() 方法传入其他类：

var modalInstance = $modal.open({
      templateUrl: 'templateUrl.html',
      controller: Controller,
      windowClass: 'custom-css-class',
      ...
    });

无法设置一个蹩脚的 ID。官方angular-ui modal docs中的更多信息。

Answer 2

这是解释为什么 id 被剥离的github 问题。

至于课程，我不确定为什么会被剥夺，但您可以使用$dialog 选项来指定课程（这将解决您的问题）：

<div id="my-id" modal="opened" options="{dialogClass: 'modal my-class'}">
  <p>Modal Here</p>
</div>