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模态文档的信息.

Answer 2

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

至于课程,我不知道为什么会被剥离,但你可以使用$ dialog选项来指定课程(这将解决你的问题):

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