angolare UI Bootstrap modale strisce id e class attributi

Question

Live Example

aggiungendo le seguenti Angular UI Bootstrap Modal:

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

risultati in:

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

Perché le id e class attributi sono spogliati?

Vorrei impostare alcuni stili CSS nella finestra di dialogo, ad es. larghezza del dialogo o stile di alcuni elementi interni del dialogo. Come potrei ottenere quello?

Answer 1

Ecco lo github issue che spiega perché l'ID viene rimosso.

Per quanto riguarda la classe, io non sono sicuro perché sta che spogliato, ma è possibile utilizzare $dialog options per specificare la classe (che risolverà il problema):

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

Answer 2

Perché ho appena imbattuto in questo problema irritante me stesso e la documentazione e il comportamento predefinito non è ovvio. È ora possibile passare in classi aggiuntive tramite il metodo $ modal.open() utilizzando l'opzione windowClass:

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

Impossibile impostare un ID però che è zoppo. Maggiori informazioni nel angular-ui modal docs ufficiale.