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

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

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.

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

• 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;
});

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.

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.