Ich habe einige Zeit damit verbracht, eine generische Methode zur Steuerung eines modalen Fensters mit AngularJS zu untersuchen, und keine der vorgeschlagenen Optionen liegt irgendwo in der Nähe einer 'guten' Lösung.
Ich fand diese Demo, aber der Nachteil davon ist, dass Sie den Zustand des Modals manuell verwalten und speichern müssen bereichsübergreifende Aktualisierung:
%Vor%Auch wenn Sie mehr Funktionalität hinzufügen müssten, wie das Hinzufügen eines Elements mit einem Popup, das noch mehr hässlichen Code im Bereich der übergeordneten Seite enthalten würde.
Dies ist die offizielle Anleitung zur Verwendung von Mods mit Ihrem Router.
Dies verwendet jedoch ui.bootstrap.modal
Meine Frage ist, gibt es eine einfache und elegante Lösung für das, was ganz offen gesagt ein sehr einfaches Problem ist ...
So etwas zum Beispiel:
%Vor% Und Dinge wie "Schließen", "Weiterleiten" und "Senden" werden in myPopupController behandelt.
Ich suche keine Erklärung dafür, warum die obigen Beispiele so sind, wie sie sind oder wie ich sie verwenden sollte. Ich schaue einfach, ob jemand eine bessere Lösung gefunden hat.
Ich arbeite seit einiger Zeit an einem Modal / Dialog-Plugin für den UI-Router (benutze es und UI-Router-Extras).
Ich bin dabei, einen Code im Haus zu einem Open-Source-Projekt zu portieren, und es wäre ein großer Vorteil (sicherlich für mich), wenn Sie bereit wären, es zu versuchen.
Wir verwenden derzeit die In-House-Version in unserer Produktionsanwendung und es funktioniert sehr gut. Mein Ziel ist es, die Open-Source-Version hinsichtlich Consumer-API und Leistung noch besser zu machen.
Gehen wir die verschiedenen Teile durch:
Dies ist der Name des ui-view , in dem Ihre modale Vorlage verwendet wird. Es ist erforderlich, dass Sie einen Container auf Ihrer Seite haben, dessen ui-view -Attribut auf eine Ansicht von $uiRouterModalProvider.viewName zeigt, die lebt neben deinem normalen ui-view für deinen normalen Inhalt (Beispiel wird später gezeigt).
Das Paket enthält eine Direktive, die das für Sie erledigt
Dies ist die Basis aller deiner Mods. Angenommen, Sie wollten einen Container mit bestimmten Eigenschaften und einem $scope , das zu jedem Zeitpunkt unabhängig vom inneren Inhalt des Modals ist.
Dies ist der Name des Stammzustands in Ihrer Anwendung. Es ist wichtig, dass dies mit dem Status übereinstimmt, der das root ui-view -Element und das modal ui-view -Element enthält.
Der Name Ihres gemeinsamen modalen Controllers. Kann auch eine Funktion sein (obwohl ich immer einen benannten Controller empfehlen würde, der isoliert getestet werden kann).
Der allgemeine Auflösungsblock für jedes Modal. Dies ist abhängig von jedem modalen Zustand eigenen Auflösungsblock. Die API und das Verhalten bezüglich der Auflösung sind noch in Bewegung.
Nachdem das Basisverhalten konfiguriert wurde, würden Sie so einen modalen Zustand registrieren:
%Vor% Die .modalState -Funktion registriert einen Zustand und referenziert die im modalProvider festgelegten allgemeinen Einstellungen und konvertiert die angegebene Zustandsdefinition in das endgültige Zustandsobjekt, das wie folgt aussieht:
Jetzt ist der Container für unseren modalen Wrapper eingerichtet. Aber was ist mit den inneren Inhalten?
Hier kommt eine andere Richtlinie ins Spiel; %Code%. Dies muss in Ihrer Vorlage für das Wrappingmodal vorhanden sein. Als solche:
%Vor%Einige abschließende Notizen vor (wenn) Sie Lust haben, dies zu tun:
uiModalFill und die Art und Weise, wie ein $ state.resolve mit der gemeinsamen modal.resolve zusammen lebt. So , wenn ich es nicht geschafft habe, euch davon abzuhalten, dies zu tun - geht weiter zu GitHub und schnappt euch angular-ui-router-modal und probieren Sie es aus. Ich bin irgendwie immer auf GitHub und / oder auf SO verfügbar, wenn Sie Hilfe benötigen.
Oder wenn Sie mich nur belästigen wollen über das Schreiben einiger Unterlagen. Ich würde das vollständig verstehen.
Nun, eine Direktive zu zeigen, ist nicht nur deklarativ über Direktiven. Auch eine Lösung via Router / State Handling würde ich nicht persönlich machen.
Mein Ansatz wäre, Modalitäten mit einem Angular Service zu handhaben. Mit einem Service können Sie Ihre Modalitäten unbedingt öffnen.
Sie haben bereits die ui.bootstrap.modal erwähnt, die meiner Meinung nach eine ziemlich gute Lösung ist. Aber es ist auch sehr flexibel.
Ich habe eine einfache dialogService mit einer Methode openConfirmDialog erstellt, die einen eigenen Controller hat:
Dies kann sehr einfach direkt in meinen Controllern verwendet werden:
%Vor%Hier ist ein funktionierender Plunker
Mit dieser Lösung muss ich meinen Controller und / oder HTML-View nicht mit Code für das Modell verschmutzen. Der modale Code ist sehr gut gekapselt.
Haben Sie sich AngularStrap Ссылка angesehen?
Sie können eine templateUrl übergeben, in der Sie einen Controller an Ihre modale Instanz binden können, wodurch Sie die volle Kontrolle erhalten (indem Sie ng-controller="ModalCtrl" auf dem obersten Element der modalen Vorlage setzen).
Sie können das modale via ng-click programmatisch auslösen oder Attribute in Ihrem HTML mit der bs-modal -Direktive setzen.
Tags und Links javascript angularjs angular-ui-router twitter-bootstrap