Angular UI Bootstrap Модальные идентификаторы и атрибуты класса

Живой пример

Добавление следующего Angular Модификатора загрузочного пользовательского интерфейса:

<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 в диалоговом окне, например. ширину диалогового окна или стиль некоторых внутренних элементов диалога. Как я могу это достичь?

Ответы

Ответ 1

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

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

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

Ответ 2

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

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

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