Pokaż wyskakujące okienka w najbardziej elegancki sposób

178

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ę.

Bruno
źródło
wiele sposobów, kontroler html zdecydowanie nie jest dobry, spójrz na UI Bootstrap Modal angular-ui.github.com/bootstrap/#/modal
charlietfl
1
Dokumenty AngularJS wyjaśniają trochę, jak zarządzać wyskakującymi oknami, w sekcji „ Zrozumienie transkluzji i zakresów ”. Mam nadzieję że to pomoże.
Ivan Ferrer Villa
Jeśli naprawdę chcesz skalować za pomocą wyskakujących okienek, sprawdź popscript .
Raj Nathani,

Odpowiedzi:

88

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łą $modalusł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.

pkozlowski.opensource
źródło
10
$ dialog jest teraz $ modalny
Sangram Singh
1
@ pkozlowski.opensource Podoba mi się podejście ui-bootstrap, ale nie wydaje mi się, aby można było przetłumaczyć zawartość za pomocą modalu. Badałem go i widzę, że inni też mają ten problem.
jusopi
2
weblogs.asp.net/dwahlin/building-an-angularjs-modal-service Uważam, że ta sztuka jest bardzo przydatna.
JenonD,
Wystarczy wspomnieć, że usługa nie powinna uzyskiwać dostępu do DOM. Dyrektywa jest na to miejsce.
superluminarny
1
@ Superluminary jest to rzeczywiście dobra ogólna reguła, której należy przestrzegać, ale to także bóg, aby wiedzieć, dlaczego pewna reguła jest w odpowiednim tempie i zrozumieć, kiedy taka reguła może (a nawet powinna!) zostać złamana. Uważam, że modale / podpowiedzi i tym podobne są wyjątkiem od reguły. W skrócie: trzeba znać zasady, ale także rozumieć kontekst, w którym mają one zastosowanie / nie mają zastosowania.
pkozlowski.opensource
29

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 :-)

Bart
źródło
2
Misko to nasienie kanciaste! (bwa haha). Poważnie Traktować jego słowa, jak w ostatecznym źródłem kanciasty.
pokład
14
  • Utwórz dyrektywę „wyskakującą” i zastosuj ją do kontenera zawartości wyskakującego okienka
  • W dyrektywie zawiń treść w absolutnej pozycji div wraz z maską div poniżej.
  • Można przesuwać 2 divy w drzewie DOM zgodnie z potrzebami w obrębie dyrektywy. Każdy kod interfejsu użytkownika jest poprawny w dyrektywach, w tym kod do ustawiania wyskakującego okienka na środku ekranu.
  • Utwórz i powiąż flagę logiczną ze sterownikiem. Ta flaga kontroluje widoczność.
  • Twórz zmienne zakresu, które łączą się z funkcjami OK / Anuluj itp.

Edycja w celu dodania przykładu wysokiego poziomu (niefunkcjonalny)

<div id='popup1-content' popup='showPopup1'>
  ....
  ....
</div>


<div id='popup2-content' popup='showPopup2'>
  ....
  ....
</div>



.directive('popup', function() {
  var p = {
      link : function(scope, iElement, iAttrs){
           //code to wrap the div (iElement) with a abs pos div (parentDiv)
          // code to add a mask layer div behind 
          // if the parent is already there, then skip adding it again.
         //use jquery ui to make it dragable etc.
          scope.watch(showPopup, function(newVal, oldVal){
               if(newVal === true){
                   $(parentDiv).show();
                 } 
              else{
                 $(parentDiv).hide();
                }
          });
      }


   }
  return p;
});
Ketan
źródło
$ watch zamiast „watch”. czy nie powinno to być „popup” zamiast „showPopup” w scope.watch(showPopup, function(newVal, oldVal){?
Sangram Singh,
14

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.

Nik Dow
źródło
1
Właśnie zrobiłem szybki sprint z tym podejściem, aby zdać sobie sprawę, że jest to świetne dla pojedynczego wyskakującego okienka / modalnego podejścia, ale pomyśl o tym konkretnym UX: Powiedz, że klient zamawia przedmiot, a interfejs użytkownika wyświetla wyskakujące okienko z potwierdzeniem zamówienia (więc my „zajmowałem” wyskakujące okienko Adama z treścią). Teraz klikamy „wyślij lub kup” lub cokolwiek z tego wyskakującego okienka i pojawia się błąd, przez który użytkownik musi zmienić to zamówienie na poprzednim ekranie. Chcę wyświetlić ten błąd w innym wyskakującym okienku na najwyższym poziomie. To podejście nie ułatwia tego, nie wierzę.
jusopi
3
To prawda, ale myślę, że więcej niż jedno okienko wyskakujące może być złym interfejsem użytkownika.
Nik Dow
wtyczka jest odpowiedzią, której szukałem!
Andres Felipe
7

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.

użytkownik2203937
źródło
5
angular-bootstrap 0.6 i nowszy zastąpił $ dialog $ modal. Oznacza to, że musisz zmienić cały kod używający $ dialog, ponieważ jest on przestarzały i napisać go w $ modal
Mohammad Umair Khan