AngularJS-Popup-Modalbox (Modell)_AngularJS
Empfohlene Lektüre: Detaillierte Erläuterung des modalen AngularJS-Dialogfelds
$modal ist ein Dienst, der schnell modale Fenster, Teilseiten und Controller erstellen und diese verknüpfen kann.
$modal hat nur eine offene Methode (Optionen)
templateUrl: die Adresse des modalen Fensters
Vorlage: Wird zur Anzeige von HTML-Tags verwendet
Bereich: Wird für Inhalte verwendet, deren Bereich modal ist (tatsächlich erstellt $modal einen untergeordneten Bereich des aktuellen Bereichs. Standardmäßig ist $rootScope
).
Controller: Der für $modal angegebene Controller initialisiert $scope und der Controller kann mit $modalInstance
injiziert werden
resolve: Definieren Sie ein Mitglied und übergeben Sie es an den durch $modal angegebenen Controller, was einem reslove-Attribut von Routen entspricht. Wenn Sie ein objec-Objekt übergeben müssen, müssen Sie angle.copy()
verwenden
Hintergrund: Steuern Sie den Hintergrund, zulässige Werte: true (Standard), false (kein Hintergrund), „statisch“ – der Hintergrund existiert, aber wenn Sie außerhalb des modalen Fensters klicken, wird das modale Fenster nicht geschlossen
Tastatur: Ob das modale Dialogfeld geschlossen wird, wenn Esc gedrückt wird. Der Standardwert ist true
windowClass: Geben Sie eine Klasse an und fügen Sie sie dem modalen Fenster hinzu
Die open-Methode gibt eine modale Instanz zurück, die die folgenden Eigenschaften hat
close(result): Schließt das modale Fenster und übergibt ein Ergebnis
dismiss(reason): Verwerfen Sie die modale Methode und übergeben Sie einen Grund
Ergebnis: Ein Vertrag wurde bestanden, als das modale Fenster geschlossen oder entlassen wurde
geöffnet: ein Vertrag, eine Variable, die übergeben wird, wenn das modale Fenster geöffnet und der Inhalt geladen wird
Darüber hinaus erweitert $modalInstance zwei Methoden $close(result) und $dismiss(reason). Diese Methoden ermöglichen ein einfaches Schließen des Fensters und erfordern keine zusätzlichen Controller
HTML
<!DOCTYPE html> <html ng-app="ModalDemo"> <head> <title></title> <link href="lib/bootstrap/css/bootstrap.min.css" rel="stylesheet"> <script src="lib/angular/angular.min.js"></script> <script src="lib/bootstrap-gh-pages/ui-bootstrap-tpls-...min.js"></script> <script src="lib/angular/in/angular-locale_zh-cn.js"></script> </head> <body> <div ng-controller="ModalDemoCtrl"> <script type="text/ng-template" id="myModalContent.html"> <div class="modal-header"> <h>I'm a modal!</h> </div> <div class="modal-body"> <ul> <li ng-repeat="item in items"> <a ng-click="selected.item = item">{{ item }}</a> </li> </ul> Selected: <b>{{ selected.item }}</b> </div> <div class="modal-footer"> <button class="btn btn-primary" ng-click="ok()">OK</button> <button class="btn btn-warning" ng-click="cancel()">Cancel</button> </div> </script> <button class="btn" ng-click="open()">Open me!</button> </div> <script> var ModalDemo = angular.module('ModalDemo', ['ui.bootstrap']); 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(){//模态窗口打开之后执行的函数 console.log('modal is opened'); }); modalInstance.result.then(function (result) { console.log(result); }, function (reason) { console.log(reason);//点击空白区域,总会输出backdrop click,点击取消,则会暑促cancel $log.info('Modal dismissed at: ' + new Date()); }); }; }; 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('cancel'); }; }; </script> </body> </html>
Das Obige ist der relevante Inhalt der AngularJs-Popup-Modalbox (Modell), die Ihnen der Herausgeber vorgestellt hat. Ich hoffe, er wird für alle hilfreich sein!

Heiße KI -Werkzeuge

Undresser.AI Undress
KI-gestützte App zum Erstellen realistischer Aktfotos

AI Clothes Remover
Online-KI-Tool zum Entfernen von Kleidung aus Fotos.

Undress AI Tool
Ausziehbilder kostenlos

Clothoff.io
KI-Kleiderentferner

AI Hentai Generator
Erstellen Sie kostenlos Ai Hentai.

Heißer Artikel

Heiße Werkzeuge

Notepad++7.3.1
Einfach zu bedienender und kostenloser Code-Editor

SublimeText3 chinesische Version
Chinesische Version, sehr einfach zu bedienen

Senden Sie Studio 13.0.1
Leistungsstarke integrierte PHP-Entwicklungsumgebung

Dreamweaver CS6
Visuelle Webentwicklungstools

SublimeText3 Mac-Version
Codebearbeitungssoftware auf Gottesniveau (SublimeText3)

Heiße Themen



Häufig gestellte Fragen und Lösungen für das Ticket-Ticket-Ticket-Ticket in Front-End im Front-End-Entwicklungsdruck ist der Ticketdruck eine häufige Voraussetzung. Viele Entwickler implementieren jedoch ...

Es gibt kein absolutes Gehalt für Python- und JavaScript -Entwickler, je nach Fähigkeiten und Branchenbedürfnissen. 1. Python kann mehr in Datenwissenschaft und maschinellem Lernen bezahlt werden. 2. JavaScript hat eine große Nachfrage in der Entwicklung von Front-End- und Full-Stack-Entwicklung, und sein Gehalt ist auch beträchtlich. 3. Einflussfaktoren umfassen Erfahrung, geografische Standort, Unternehmensgröße und spezifische Fähigkeiten.

Wie fusioniere ich Array -Elemente mit derselben ID in ein Objekt in JavaScript? Bei der Verarbeitung von Daten begegnen wir häufig die Notwendigkeit, dieselbe ID zu haben ...

JavaScript ist der Eckpfeiler der modernen Webentwicklung. Zu den Hauptfunktionen gehören eine ereignisorientierte Programmierung, die Erzeugung der dynamischen Inhalte und die asynchrone Programmierung. 1) Ereignisgesteuerte Programmierung ermöglicht es Webseiten, sich dynamisch entsprechend den Benutzeroperationen zu ändern. 2) Die dynamische Inhaltsgenerierung ermöglicht die Anpassung der Seiteninhalte gemäß den Bedingungen. 3) Asynchrone Programmierung stellt sicher, dass die Benutzeroberfläche nicht blockiert ist. JavaScript wird häufig in der Webinteraktion, der einseitigen Anwendung und der serverseitigen Entwicklung verwendet, wodurch die Flexibilität der Benutzererfahrung und die plattformübergreifende Entwicklung erheblich verbessert wird.

Eingehende Diskussion der Ursachen des Unterschieds in der Konsole.log-Ausgabe. In diesem Artikel wird die Unterschiede in den Ausgabeergebnissen der Konsolenfunktion in einem Code analysiert und die Gründe dafür erläutert. � ...

Sobald Sie das Typscript-Tutorial für Einstiegsklasse gemeistert haben, sollten Sie in der Lage sein, Ihren eigenen Code in eine IDE zu schreiben, die TypeScript unterstützt und in JavaScript zusammenfasst. Dieses Tutorial wird in verschiedenen Datentypen in TypeScript eingetaucht. JavaScript hat sieben Datentypen: NULL, UNDEFINED, BOOLEAN, NUMMER, STRING, SYMBOL (durch ES6 eingeführt) und Objekt. TypeScript definiert mehr Typen auf dieser Grundlage, und dieses Tutorial wird alle ausführlich behandelt. Null -Datentyp Wie JavaScript, null in TypeScript

Diskussion über die Realisierung von Parallaxe -Scrolling- und Elementanimationseffekten in diesem Artikel wird untersuchen, wie die offizielle Website der Shiseeido -Website (https://www.shiseeido.co.jp/sb/wonderland/) ähnlich ist ...

JavaScript kann in PowerPoint ausgeführt werden und durch Aufrufen externer JavaScript -Dateien oder der Einbettung von HTML -Dateien über VBA implementiert werden. 1. Um VBA zu verwenden, um JavaScript -Dateien aufzurufen, müssen Sie Makros aktivieren und VBA -Programmierkenntnisse haben. 2. Einbetten Sie HTML -Dateien ein, die JavaScript enthalten, die einfach und einfach zu bedienen sind, aber Sicherheitsbeschränkungen unterliegen. Zu den Vorteilen zählen erweiterte Funktionen und Flexibilität, während Nachteile Sicherheit, Kompatibilität und Komplexität beinhalten. In der Praxis sollte die Aufmerksamkeit auf Sicherheit, Kompatibilität, Leistung und Benutzererfahrung geschenkt werden.
