Zeigen Sie Popups auf eleganteste Weise

178

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.

Bruno
quelle
Zahlreiche Möglichkeiten, Controller für HTML definitiv nicht gut, siehe UI Bootstrap Modal angle-ui.github.com/bootstrap/#/modal
charlietfl
1
In den Dokumenten von AngularJS wird im Abschnitt " Grundlegendes zu Transclusion and Scopes " ein wenig erläutert, wie Popups verwaltet werden . Hoffe das hilft.
Ivan Ferrer Villa
Wenn Sie wirklich mit Popups skalieren möchten, lesen Sie Popscript .
Raj Nathani

Antworten:

88

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.

pkozlowski.opensource
quelle
10
$ dialog ist jetzt $ modal
Sangram Singh
1
@ pkozlowski.opensource Ich mag den Ansatz von ui-bootstrap, aber ich kann scheinbar keinen Inhalt mit dem Modal übertragen. Ich habe es einige recherchiert und sehe, dass andere Leute dieses Problem auch haben.
Jusopi
2
weblogs.asp.net/dwahlin/building-an-angularjs-modal-service Ich fand diesen Artikel sehr nützlich.
JenonD
Nur um zu erwähnen, sollte ein Dienst nicht auf das DOM zugreifen. Eine Richtlinie ist der Ort dafür.
Superluminary
1
@superluminary Dies ist in der Tat eine gute allgemeine Regel, aber es ist auch gut zu wissen, warum eine bestimmte Regel im Tempo ist und zu verstehen, wann eine solche Regel gebrochen werden kann (oder sollte!). Ich glaube, dass Modalitäten / Tooltips und dergleichen eine Ausnahme von der Regel sind. Kurz gesagt: Man muss Regeln kennen, aber auch den Kontext verstehen, in dem diese gelten / nicht gelten.
pkozlowski.opensource
29

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

Bart
quelle
2
Misko ist der Samen von Angular! (bwa haha). Ernsthaft tho. Betrachten Sie seine Worte als die endgültige Quelle für Winkel.
Deck
14
  • 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;
});
Ketan
quelle
$ watch statt 'watch'. Sollte es nicht auch "Popup" statt "ShowPopup" sein scope.watch(showPopup, function(newVal, oldVal){?
Sangram Singh
14

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.

Nik Dow
quelle
1
Ich habe gerade einen kurzen Sprint mit diesem Ansatz durchgeführt, um zu erkennen, dass dies für einen einzelnen Popup- / Modal-Ansatz großartig ist. Denken Sie jedoch an diese spezielle UX: Angenommen, ein Kunde bestellt einen Artikel, und die Benutzeroberfläche zeigt ein Popup zur Bestätigung der Bestellung an (also wir) Ich habe Adams Popup mit Inhalten besetzt. Jetzt klicken wir in diesem Popup auf Senden oder Kaufen oder was auch immer, und es gibt einen Fehler, bei dem der Benutzer diese Reihenfolge im vorherigen Bildschirm ändern muss. Ich möchte diesen Fehler in einem anderen Popup auf der obersten Ebene anzeigen. Dieser Ansatz erleichtert dies nicht, glaube ich nicht.
Jusopi
3
Stimmt, aber ich denke, dass mehr als ein Popup eine schlechte Benutzeroberfläche sein könnte.
Nik Dow
Nun, das Plugin ist die Antwort, nach der ich gesucht habe!
Andres Felipe
7

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.

user2203937
quelle
5
Angular-Bootstrap ab 0.6 hat $ dialog durch $ modal ersetzt. Das bedeutet, dass Sie den gesamten Code, der $ dialog verwendet, ändern müssen, da er veraltet ist, und ihn in $ modal schreiben müssen
Mohammad Umair Khan