Angular UI Bootstrap Modal剥离id和class属性

实例

Adding the following Angular UI Bootstrap Modal:

添加以下Angular UI Bootstrap模式：

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

results in:

结果是：

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

Why the id and class attributes are stripped?

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

I would like to set some CSS styling on the dialog, e.g. dialog's width, or styling some dialog's inner elements. How could I achieve that?

我想在对话框上设置一些CSS样式，例如对话框的宽度，或样式化对话框的内部元素。我怎么能实现这一目标？

2 个解决方案

#1

Because I just came across this irritating issue myself and the documentation and default behavior isn't obvious. You can now pass in additional classes via the $modal.open() method using the windowClass option:

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

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

Can't set an ID though which is lame. More info in the official angular-ui modal docs.

无法设置ID虽然是蹩脚的。更多关于官方angular-ui模态文档的信息。

#2

Here's the github issue explaining why the id is being stripped.

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

As for the class, I'm not sure why's that stripped, but you can use $dialog options to specify the class (which will fix your issue):

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

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

#1