1. Dom
  2. Pytanie i odpowiedź
  3. Dyrektywy dotyczące Angular Dialog z Bootstrap 3

Dyrektywy dotyczące Angular Dialog z Bootstrap 3

2013-08-09 11 views
14

Próbujemy przeprowadzić migrację z Bootstrap 2.3.2 do Bootstrap 3 (RC1) i mamy problemy z AngularJS Dialog directive. Po kliknięciu odpowiedniego przycisku nie pojawia się wyskakujące okienko dialogowe (strona wyświetla się w kolorze czarnym, Kliknięcie w dowolnym miejscu powoduje powrót do oryginalnego widoku innego niż czarny).Dyrektywy dotyczące Angular Dialog z Bootstrap 3

Zasadniczo używamy dokładnie tego samego kodu, co w powyższym linku.

Istnieje znany problem omawiany here. W tej dyskusji Luther proponuje:

„mieć modalne pracował, dodać hide klasę ustawić display: none do modalne i przywrócić wyświetlanie modalnego do zablokowania”

że niestety nie wydaje zrobić jakąkolwiek różnicę. Jakie alternatywy możemy użyć, aby uzyskać okna dialogowe w Bootstrap 3 RC1?

Próbowałem już korzystać z Modal directive instead. Ma podobny problem, gdy strona zanika (a nie jest całkowicie czarna), a okienko wyskakujące również się nie pojawia.

Źródło

2013-08-09 KEB

+0

można dokonać http://jsfiddle.com lub http://plnkr.co swojego problemu? –

+0

możliwy duplikat [Bootstrap 3 z AngularJS] (http://stackoverflow.com/questions/16327846/bootstrap-3-with-angularjs) i możliwy duplikat http://stackoverflow.com/questions/18205329/does-angularui -bootstrap-support-twitter-bootstrap-3 –

+0

@KEB dlaczego nie oznaczyć odpowiedzi, jeśli uważasz, że któraś z nich jest przydatna? Pozdrowienia – superjos

Odpowiedz

-2

Przykładowy kod, którego używasz działa z Twitter Bootstrap 2.3.2. Dlaczego spodziewasz się, że powinien on również działać z wersją 3 Bootstrap 3 na Twitterze? Twitterowy Bootstrap 3 nie jest wstecznie zgodny z Bootstrap 2.x na Twitterze. Będziesz musiał zmienić/zmigrować swój HTML. Ponieważ używasz Angular JS, będziesz musiał migrować swoje szablony. Większość prac wydaje się w tej chwili gotowa, patrz: https://github.com/angular-ui/bootstrap/pull/742. http://www.bootply.com/bootstrap-3-migration-guide da ci wrażenie zmian, które będziesz musiał wprowadzić.

Źródło

2013-08-14 20:17:53

14

Jak stwierdziły inne odpowiedzi, to ze względu na złamanie zmiany Bootstrap 3. do Kątowymi zespołu UI problemy zostały rozwiązane (obecnie w fazie rozwoju, zobacz oddział bootstrap3_bis) istnieje css obejście tylko dla dialogu b oxes wyszczególnione w this blog post:

.modal { display: block; }

robocza plunkr jest dostępny tutaj:

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

Źródło

2013-08-31 13:29:13 embee

+1

Dzięki, dodałem .modal { display: block; wysokość: 0; przepełnienie: widoczne; } A to pomaga w obejściu przynajmniej jednego problemu :) – JoshGough

+0

Dzięki. Połączony przykład plunkr nie działa dla wersji 0.6 (działa dla wersji 0.5). Otrzymuję komunikat "Nieznany dostawca: $ dialogProvider <- $ dialog". Każdy pomysł, jak to naprawić? –

+1

@AlanKlement $ dialog już nie jest, używając Modal teraz, użyj go przez dodanie "ui.bootstrap.modal" i skorzystaj z usługi $ modal. Kątowa strona projektu ładowania początkowego jest aktualizowana, jak z niej korzystać. Są też zmiany API, więc nie tylko znajdź/zamień :) – Mutahhir

Powiązane problemy

 Powiązane problemy