Direttive Dialog angolari con Bootstrap 3

Question

Stiamo provando a migrare da Bootstrap 2.3.2 a Bootstrap 3 (RC1) e stiamo avendo problemi con lo AngularJS Dialog directive. Facendo clic sul relativo pulsante non viene visualizzata alcuna finestra popup di dialogo (la pagina appare nera. Facendo clic in qualsiasi punto si ritorna alla vista originale non nera).

Stiamo essenzialmente utilizzando esattamente lo stesso codice del collegamento precedente.

C'è un problema noto discusso here. In quella discussione Lutero suggerisce:

"per avere modal lavorato, aggiungere nascondere classe per impostare display: none per modale e ripristinare il display del modali per bloccare"

che purtroppo non sembra fare qualsiasi differenza Quali alternative potremmo usare per ottenere le finestre di dialogo che appaiono in Bootstrap 3 RC1?

Ho provato a utilizzare lo Modal directive instead. Ha un problema simile a quello in cui la pagina si affievolisce (piuttosto che diventa completamente nera) e anche il popup non appare.

Answer 1

Il codice di esempio che si utilizza funziona con Twitter Bootstrap 2.3.2. Perché pensi che dovrebbe funzionare anche con la versione 3 di Bootstrap 3 di Twitter? Bootstrap 3 di Twitter non è retrocompatibile con Bootstrap 2.x di Twitter. Dovrai cambiare/migrare il tuo HTML. Perché stai usando Angular JS, dovrai migrare i tuoi modelli. La maggior parte delle opere sembra pronta al momento, vedi: https://github.com/angular-ui/bootstrap/pull/742. http://www.bootply.com/bootstrap-3-migration-guide ti darà un'idea delle modifiche che dovrai apportare.

Answer 2

C'è un attesa di richiesta di pull che contiene le correzioni per la maggior parte dei problemi con Bootstrap 3.0 e le direttive AngularUi, compresi i problemi con le finestre di dialogo (che erano certamente i più frustranti per me!):

https://github.com/angular-ui/bootstrap/pull/742

(vedere Bootstrap 3 compatible with current AngularJS bootstrap directives?)

Answer 3

Come le altre risposte hanno dichiarato, questo è dovuto alla rottura cambiamenti di Bootstrap 3. Fino alla squadra UI angolare aver risolto questi problemi (attualmente in fase di sviluppo, vedi il ramo bootstrap3_bis) v'è una soluzione alternativa per il dialogo b buoi dettagliati in this blog post:

.modal { display: block; } 

lavoro plunkr è disponibile qui:

http://plnkr.co/edit/nZT58YNKT84UlSwTvfpc?p=preview