Mam tę aplikację AngularJS. Wszystko działa dobrze.
Teraz muszę wyświetlać różne wyskakujące okienka, gdy spełnią się określone warunki, i zastanawiałem się, jaki byłby najlepszy sposób postępowania.
Obecnie oceniam dwie opcje, ale jestem całkowicie otwarty na inne opcje.
opcja 1
Mogę utworzyć nowy element HTML dla wyskakującego okienka i dołączyć go do DOM bezpośrednio z kontrolera.
To złamie wzorzec projektowy MVC. Nie jestem zadowolony z tego rozwiązania.
Opcja 2
Zawsze mogłem wstawić kod dla wszystkich wyskakujących okienek w statycznym pliku HTML. Następnie, używając ngShow
, mogę ukryć / pokazać tylko poprawne wyskakujące okienko.
Ta opcja nie jest tak naprawdę skalowalna.
Jestem więc prawie pewien, że musi być lepszy sposób na osiągnięcie tego, czego chcę.
Odpowiedzi:
Bazując na dotychczasowych doświadczeniach z modułami AngularJS, uważam, że najbardziej eleganckim podejściem jest dedykowana usługa, do której możemy dostarczyć częściowy (HTML) szablon do wyświetlenia w module.
Kiedy myślimy o tym, modały są rodzajem tras AngularJS, ale wyświetlane tylko w modalnym wyskakującym oknie.
Projekt rozruchowy AngularUI ( http://angular-ui.github.com/bootstrap/ ) ma doskonałą
$modal
usługę (wcześniej nazywaną $ dialog przed wersją 0.6.0), która jest implementacją usługi wyświetlającej zawartość części jako modalne wyskakujące okienko.źródło
To zabawne, ponieważ sam uczę się Angulara i oglądałem filmy z ich kanału na Youtube. Mówca wspomina o twoim dokładnym problemie w tym filmie https://www.youtube.com/watch?v=ZhfUv0spHCY#t=1681 około 28:30 minuty.
Sprowadza się to do umieszczenia tego konkretnego fragmentu kodu w usłudze, a nie w kontrolerze.
Domyślam się, że wstawię nowe elementy wyskakujące do DOM i obsłuży je osobno zamiast pokazywania i ukrywania tego samego elementu. W ten sposób możesz mieć wiele wyskakujących okienek.
Cały film jest również bardzo interesujący do obejrzenia :-)
źródło
Edycja w celu dodania przykładu wysokiego poziomu (niefunkcjonalny)
źródło
scope.watch(showPopup, function(newVal, oldVal){
?Zobacz http://adamalbrecht.com/2013/12/12/creating-a-simple-modal-dialog-directive-in-angular-js/, aby uzyskać prosty sposób modalnego dialogu z Angularem i bez potrzeby ładowania go
Edycja: Od tego czasu korzystam z okna dialogowego ng z http://likeastore.github.io/ngDialog, który jest elastyczny i nie ma żadnych zależności.
źródło
Angular-ui jest wyposażony w dyrektywę dialogową. Użyj go i ustaw szablonurl na dowolną stronę, którą chcesz dołączyć. Jest to najbardziej elegancki sposób i użyłem go również w moim projekcie. W zależności od potrzeb możesz przekazać kilka innych parametrów do dialogu.
źródło