Угловой UI Bootstrap Модальных полосы идентификатора и атрибуты класса

Question

Live Example

Добавления следующих Angular UI Bootstrap Modal:

<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

Вот github issue, объясняющий, почему идентификатор удаляется.

Что касается класса, я не знаю, почему это, что раздели, но вы можете использовать $dialog options указать класс (который исправит проблему):

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

Answer 2

Потому что я просто наткнулся на этот раздражающий вопрос сам и документация и поведение по умолчанию не очевидны. Теперь вы можете перейти в дополнительных классах с помощью метода $ modal.open() с помощью опции windowClass:

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

Невозможно установить идентификатор хотя, который является неточным. Дополнительная информация в официальном angular-ui modal docs.