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 ngShow
ich 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.
Antworten:
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
$modal
Dienst (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.quelle
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 :-)
quelle
Bearbeiten, um ein Beispiel auf hoher Ebene hinzuzufügen (nicht funktionsfähig)
quelle
scope.watch(showPopup, function(newVal, oldVal){
?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.
quelle
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.
quelle