Zeigen Sie Popups auf eleganteste Weise

Ich habe diese AngularJS App. Alles funktioniert gut.

Jetzt muss ich verschiedene Popups anzeigen, wenn bestimmte Bedingungen erfüllt sind, und ich habe mich gefragt, wie ich am besten vorgehen soll.

Derzeit prüfe ich zwei Optionen, bin aber absolut offen für andere Optionen.

Option 1

Ich könnte das neue HTML-Element für das Popup erstellen und direkt vom Controller an das DOM anhängen.

Dadurch wird das MVC-Entwurfsmuster unterbrochen. Ich bin mit dieser Lösung nicht zufrieden.

Option 2

Ich konnte immer den Code für alle Popups in die statische HTML-Datei einfügen. Dann kann ngShowich mit nur das richtige Popup ausblenden / einblenden.

Diese Option ist nicht wirklich skalierbar.

Ich bin mir ziemlich sicher, dass es einen besseren Weg geben muss, um das zu erreichen, was ich will.

Aufgrund meiner bisherigen Erfahrungen mit AngularJS-Modalen glaube ich, dass der eleganteste Ansatz ein dedizierter Dienst ist, für den wir eine Teilvorlage (HTML) bereitstellen können, die in einem Modal angezeigt wird.

Wenn wir darüber nachdenken, sind Modals eine Art AngularJS-Route, die jedoch nur im modalen Popup angezeigt wird.

Das AngularUI-Bootstrap-Projekt ( http://angular-ui.github.com/bootstrap/ ) verfügt über einen ausgezeichneten $modalDienst (vor Version 0.6.0 als $ dialog bezeichnet), bei dem es sich um eine Implementierung eines Dienstes handelt, bei dem der Inhalt des Teils als angezeigt wird ein modales Popup.

Es ist lustig, weil ich selbst Angular lerne und einige Videos von ihrem Kanal auf Youtube gesehen habe. Der Sprecher erwähnt Ihr genaues Problem in diesem Video https://www.youtube.com/watch?v=ZhfUv0spHCY#t=1681 um die 28:30 Minuten-Marke.

Es kommt darauf an, diesen bestimmten Code in einem Dienst und nicht in einem Controller zu platzieren.

Meine Vermutung wäre, neue Popup-Elemente in das DOM einzufügen und sie separat zu behandeln, anstatt dasselbe Element anzuzeigen und auszublenden. Auf diese Weise können Sie mehrere Popups haben.

Das ganze Video ist auch sehr interessant anzusehen :-)

• Erstellen Sie eine Popup-Direktive und wenden Sie sie auf den Container des Popup-Inhalts an
• Umschließen Sie in der Direktive den Inhalt in eine absolute Position div zusammen mit der Maske div darunter.
• Es ist in Ordnung, die 2 Divs im DOM-Baum nach Bedarf aus der Direktive heraus zu verschieben. Jeder UI-Code in den Anweisungen ist in Ordnung, einschließlich des Codes zum Positionieren des Popups in der Mitte des Bildschirms.
• Erstellen Sie ein boolesches Flag und binden Sie es an den Controller. Diese Flagge steuert die Sichtbarkeit.
• Erstellen Sie Bereichsvariablen, die mit OK / Abbrechen-Funktionen usw. verknüpft sind.

Bearbeiten, um ein Beispiel auf hoher Ebene hinzuzufügen (nicht funktionsfähig)

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

Unter http://adamalbrecht.com/2013/12/12/creating-a-simple-modal-dialog-directive-in-angular-js/ finden Sie eine einfache Möglichkeit, einen modalen Dialog mit Angular und ohne Bootstrap durchzuführen

Bearbeiten: Ich verwende seitdem ng-dialog von http://likeastore.github.io/ngDialog, das flexibel ist und keine Abhängigkeiten aufweist.

Angular-ui wird mit einer Dialoganweisung geliefert. Verwenden Sie diese und setzen Sie templateurl auf die Seite, die Sie einschließen möchten. Dies ist die eleganteste Art und ich habe sie auch in meinem Projekt verwendet. Sie können je nach Bedarf mehrere andere Parameter für den Dialog übergeben.