Angulaire UI Bootstrap Modal bandes attributs id et class

Live Exemple

Adjonction Angulaire de l'INTERFACE utilisateur Modal Bootstrap:

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

résultats dans:

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

Pourquoi le id et class attributs sont dépouillés?

Je voudrais mettre un peu de CSS style dans la boîte de dialogue, par exemple, la boîte de dialogue de la largeur ou le style de certains des éléments internes de la boîte de dialogue. Comment pourrais-je y parvenir?

modal est une commodité directive de dialog qui a beaucoup plus de flexibilité et d'options.
J'ai essayé de définir la largeur intérieure div, mais le résultat est assez mauvais.

OriginalL'auteur Misha Moroshko | 2013-03-14

  1. 12

    Parce que je viens de tomber sur cette irritante question de moi-même et de la documentation et du comportement par défaut n'est pas évident. Vous pouvez maintenant passer en classes supplémentaires via l' $modal.la méthode open() à l'aide de la windowClass option:

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

    Ne pouvez pas définir un ID bien que ce qui est boiteux. Plus d'infos dans l'officiel angular-ui modal docs.

    ouais. j'ai eu du mal pendant des jours. enfin, voici la réponse.
    Quelques réponses faciliter la vie. Bravo.

    OriginalL'auteur standingwave

  2. 8

    Voici la github problème expliquant pourquoi l'id est dépouillé.

    Que pour la classe, je ne suis pas sûr pourquoi dépouillé, mais vous pouvez utiliser $boîte de dialogue options pour spécifier la classe (ce qui permettra de résoudre votre problème):

    <div id="my-id" modal="opened" options="{dialogClass: 'modal my-class'}">
  <p>Modal Here</p>
</div>
    Ressemble à réglage dialogClass provoque la modale de ne pas afficher correctement: plnkr.co/modifier/PyDqFwY8ejhZVqvzjwq6?aperçu&p=preview. Je suppose que c'est parce que la définition d' dialogClass supprime la modal classe. Toutes les idées sur la façon de résoudre ce problème?
    Je suppose que je pourrais le mettre dialogClass: 'modal my-class', mais ça ressemble un peu à hacky. Est-il un meilleur moyen?
    Ouais, j'ai oublié la classe modale. Ne sais pas de toute autre manière, n'a pas utilisé ce trop.
    Il semble que ce fut dépouillé dans la version la plus récente de $modal, de sorte qu'il semble. Assez modification de rupture pour moi, honnêtement.
    $dialogue a été supprimé: github.com/angular-ui/bootstrap/tree/master/src

    OriginalL'auteur Stewie