Angular Dialog Direktiven mit Bootstrap 3

Wir versuchen, von Bootstrap 2.3.2 zu Bootstrap 3 (RC1) zu migrieren und haben Probleme mit der AngularJS Dialog directive. Wenn Sie auf die entsprechende Schaltfläche klicken, wird kein Dialogfeld angezeigt (die Seite erscheint schwarz. Klicken Sie auf eine beliebige Stelle, um zur ursprünglichen nicht schwarzen Ansicht zurückzukehren).Angular Dialog Direktiven mit Bootstrap 3

Wir verwenden im Wesentlichen genau den gleichen Code wie im obigen Link.

Es ist ein bekanntes Problem bekannt here. In dieser Diskussion schlägt Luther:

"modal gearbeitet zu haben, verbergen Klasse hinzufügen Anzeige einzustellen: keine der modalen Display zur modalen und Reset zu blockieren"

, die leider nicht scheint um etwas zu verändern. Welche Alternativen könnten wir verwenden, um die Dialoge in Bootstrap 3 RC1 erscheinen zu lassen?

Ich habe versucht mit der Modal directive instead. Es hat ein ähnliches Problem, wo die Seite verblasst (anstatt komplett schwarz zu werden) und das Popup erscheint auch nicht.

Quelle

2013-08-09 KEB

Sie einen http://jsfiddle.com oder ein http://plnkr.co Ihr Problem machen könnten? –

mögliches Duplikat von [Bootstrap 3 mit AngularJS] (http://stackoverflow.com/questions/16327846/bootstrap-3-with-angularjs) und mögliches Duplikat von http://stackoverflow.com/questions/18205329/does-angularui -bootstrap-support-twitter-bootstrap-3 –

@KEB warum nicht eine Antwort markieren, wenn Sie eine von ihnen nützlich fanden? Prost – superjos

-2

Der von Ihnen verwendete Beispielcode funktioniert mit Twitter Bootstrap 2.3.2. Warum erwartest du, dass es auch mit der Version 3 von Twitter's Bootstrap 3 funktionieren sollte? Twitter's Bootstrap 3 ist nicht rückwärtskompatibel zu Twitter's Bootstrap 2.x. Sie müssen Ihren HTML-Code ändern/migrieren. Da Sie Angular JS verwenden, müssen Sie Ihre Vorlagen migrieren. Die meisten Arbeiten scheinen momentan fertig zu sein, siehe: https://github.com/angular-ui/bootstrap/pull/742. http://www.bootply.com/bootstrap-3-migration-guide gibt Ihnen einen Eindruck von den Änderungen, die Sie vornehmen müssen.

Quelle

2013-08-14 20:17:53

Es gibt eine Pull-Anforderung anhängig, die Korrekturen für die meisten Probleme mit Bootstrap 3.0 und die AngularUi Richtlinien, einschließlich der Probleme mit den Dialogen enthält (was sicherlich für mich, die meisten frustrierend diejenigen waren!):

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

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

Quelle

2013-08-21 07:05:06

Wie die anderen Antworten erwähnt, ist dies aufgrund von Änderungen in Bootstrap 3. bis zum Angular UI-Team zu brechen diese Probleme behoben (derzeit in der Entwicklung finden Sie in der bootstrap3_bis Zweig) ein ist css Workaround nur für Dialog b detaillierter oxes in this blog post:

.modal { display: block; }

Arbeits plunkr finden Sie hier:

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

Quelle

2013-08-31 13:29:13 embee

Danke, ich fügte .modal { Anzeige: Block; Höhe: 0; Überlauf: sichtbar; } Und das hilft um mindestens ein Problem zu umgehen :) – JoshGough

Danke. Das verknüpfte Plunkr-Beispiel funktioniert nicht für Version 0.6 (es funktioniert für Version 0.5). Ich erhalte den Fehler 'Unbekannter Provider: $ dialogProvider <- $ dialog'. Irgendeine Idee, wie das zu beheben ist? –

@AlanKlement $ dialog ist nicht mehr, verwenden Sie jetzt Modal, verwenden Sie es, indem Sie "ui.bootstrap.modal" einschließen und den $ modal-Dienst verwenden. Die eckige Bootstrap-Projektseite wird mit der Verwendung aktualisiert. Es gibt API Änderungen auch, also nicht nur finden/ersetzen :) – Mutahhir

Angular Dialog Direktiven mit Bootstrap 3

Antwort

Verwandte Themen