Empfohlener Lesen: Detaillierte Erläuterung des modalen Dialogfelds AngularJS
$ modal ist ein Dienst, der schnell modale Fenster erstellen, einen Teil der Seiten, Controller erstellen und diese assoziieren kann.
$ modal hat nur eine Methode geöffnet (Optionen)
Templateurl: Die Adresse des Modalfensters
Vorlage: Wird zum Anzeigen von HTML -Tags verwendet
Umfang: Die Verwendung von Inhalten mit einem modalen Bereich (in der Tat erstellt $ modal ein Subscope des aktuellen Umfangs) standardmäßig ist $ rootscope
Controller: Der für $ modal angegebene Controller initialisiert $ scope, dem $ modalinstance injiziert werden kann
Auflösung: Definieren Sie ein Mitglied und geben Sie es an den von $ modal angegebenen Controller. Es entspricht einer Reslove -Eigenschaft von Routen. Wenn Sie ein Objekt übergeben müssen, müssen Sie angular.copy () verwenden.)
Backdrop: Steuern Sie den Hintergrund, zulässige Werte: TRUE (Standard), Falsch (kein Hintergrund), "statisch" - Der Hintergrund existiert, aber beim Klicken außerhalb des Modalsfensters wird das Modal -Fenster nicht geschlossen
Tastatur: Wenn ESC gedrückt wird, ob das modale Dialogfeld geschlossen ist, standardmäßig ture
Fensterklasse: Geben Sie eine Klasse an und fügen Sie sie dem Modalfenster hinzu
Die offene Methode gibt eine modale Instanz zurück, die die folgenden Eigenschaften aufweist
Schließen (Ergebnis): Schließen Sie das Modalfenster und geben Sie ein Ergebnis weiter
Entlassung (Grund): die modale Methode rückgängig machen und einen Grund übergeben
Ergebnis: Ein Vertrag, der verabschiedet wird, wenn das Modalfenster geschlossen oder widerrufen wird
Öffnet: Ein Vertrag, eine Variable, die beim Öffnen des Modalsfensters übergeben wurde und der Inhalt geladen wird
Darüber hinaus erweitert $ modalinstance zwei Methoden $ Close (Ergebnis), $ entlass (Grund), die Windows leicht schließen und keine zusätzlichen Controller benötigen
Html
<! DocType html> <html ng-App = "modalDemo"> <kopf> <titels> </title> <link href = "lib/bootstrap/css/bootstrap.min src = "lib/bootstrap-gh-pages/ui-bootstrap-tPLs -... min.js"> </script> <script src = "lib/angular/in/Angular-locale_zh-cn.js"> </script> </head> <body> <divn-controller = "modaldemoctrl" id = "myModalContent.html"> <div> <h> Ich bin ein Modal! </div> <div> <button ng-klick var modalDemoctrl = function ($ scope, $ modal, $ log) {$ scope.items = ['item', 'item', 'item']; $ scope.open = function () {var modalInstance = $ modal.open ({templateurl: 'myModalContent.html', Controller: modalInstancectrl, Resolve: {items: function () {return $ scope.Items;}}}}); modalinstance.opened.then (function () {// Die nach dem Modalfenster geöffnete und konsole.log ('modal ist geöffnet');}); modalinstance.result.then (Funktion (Ergebnis) {console.log (result);}, Funktion (Grund) {console.log (Grund); // Klicken Sie auf den leeren Bereich, klicken Sie immer aus. }); }; }; var modalinStancectrl = function ($ scope, $ modalinstance, items) {$ scope.items = items; $ scope.selected = {item: $ scope.Items []}; $ scope.ok = function () {$ modalinstance.close ($ scope.selected); }; $ scope.cancel = function () {$ modalInstance.dismiss ('covorn'); }; }; </script> </body> </html>Das obige ist der relevante Inhalt des vom Editor vorgestellten AngularJS-Popup-Modus-Box (Modell). Ich hoffe, es wird für alle hilfreich sein!