it-swarm.com.de

Zeigen Sie Pop-ups auf die eleganteste Art und Weise

Ich habe diese AngularJS App. Alles funktioniert gut.

Jetzt muss ich verschiedene Popups anzeigen, wenn bestimmte Bedingungen zutreffen, und ich habe mich gefragt, wie ich am besten vorgehen kann.

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


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 könnte immer den Code für alle Popups in der statischen HTML-Datei einfügen. Dann kann ich mit ngShow nur das richtige Popup ein-/ausblenden.

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.

178
Bruno

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

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

Das AngularUI bootstrap project ( http://angular-ui.github.com/bootstrap/ ) hat ein exzellentes $modal service (vor Version 0.6.0 als $ dialog bezeichnet) ist eine Implementierung eines Dienstes zum Anzeigen des Inhalts eines Teils als modales Popup.

88

Es ist lustig, weil ich Angular ich selbst lerne und einige Videos von ihrem Kanal auf Youtube anschaue. 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 zu platzieren und nicht in einem Controller.

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

Das ganze Video ist auch sehr interessant anzusehen :-)

29
Bart
  • Erstellen Sie eine Popup-Direktive und wenden Sie sie auf den Container des Popup-Inhalts an
  • Schließen Sie den Inhalt in der Direktive in eine absolute Position div zusammen mit der Maskendivision darunter ein.
  • Es ist in Ordnung, die 2 Divs in der DOM-Struktur nach Bedarf innerhalb der Direktive zu verschieben. Jeder UI-Code ist in den Anweisungen OK, einschließlich des Codes zum Positionieren des Popups in der Bildschirmmitte.
  • Erstellen und binden Sie ein Boolesches Flag an den Controller. Diese Flagge steuert die Sichtbarkeit.
  • Erstellen Sie Bereichsvariablen, die mit OK/Cancel-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;
});
14
Ketan

Siehe http://adamalbrecht.com/2013/12/12/creating-a-simple-modal-dialog-directive-in-angular-js/ für eine einfache Möglichkeit, einen modalen Dialog mit = zu führen Angular und ohne Bootstrap

Edit: Ich benutze seitdem ng-dialog von http://likeastore.github.io/ngDialog , das flexibel ist und keine Abhängigkeiten hat.

14
Nik Dow

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

7
user2203937