Lecture recommandée: Explication détaillée de la boîte de dialogue modale AngularJS
$ modal est un service qui peut rapidement créer des fenêtres modales, créer une partie des pages, des contrôleurs et les associer.
$ modal n'a qu'une seule méthode ouverte (options)
templateUrl: l'adresse de la fenêtre modale
Modèle: utilisé pour afficher les balises HTML
Portée: utilisation du contenu avec une portée modale (en fait, $ modal créera une sous -cope de la portée actuelle) par défaut est $ rootscope
Contrôleur: Le contrôleur spécifié pour $ modal, initialise $ scope, qui peut être injecté avec $ modalinstance
Résolve: définissez un membre et transmettez-le au contrôleur spécifié par $ modal. Il est équivalent à une propriété de récompense des itinéraires. Si vous devez passer un objet d'objet, vous devez utiliser Angular.copy ()
TELLEDROP: Contrôlez l'arrière-plan, Valeurs admissibles: TRUE (par défaut), False (pas d'arrière-plan), "statique" - l'arrière-plan existe, mais lorsque vous cliquez en dehors de la fenêtre modale, la fenêtre modale ne se ferme pas
Clavier: lorsque l'ESC est enfoncé, si la boîte de dialogue modale est fermée, par défaut
WindowClass: spécifiez une classe et ajoutez-la à la fenêtre modale
La méthode ouverte renvoie une instance modale, qui a les propriétés suivantes
Fermer (résultat): Fermez la fenêtre modale et passez un résultat
rejeter (raison): annuler la méthode modale et passer une raison
Résultat: un contrat qui est passé lorsque la fenêtre modale est fermée ou révoquée
Ouvert: un contrat, une variable passée lorsque la fenêtre modale s'ouvre et que le contenu est chargé
De plus, $ modalinstance étend deux méthodes $ close (résultat), $ rejeter (raison), qui ferment facilement les fenêtres et ne nécessitent pas de contrôleurs supplémentaires
Html
<! Doctype html> <html ng-app = "modaldemo"> <éread> <itle> </ 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 = "modaldeMTl"> <script type = "text / ng-tempard" id = "myModalcontent.html"> <div> <h> Je suis un modal! </h> </div> <div> <ul> <li ng-repeat = "item in items"> <a ng-click = "selected.item = item"> {{item}} </a> </li> </ul> sélectionné: <b> {} </div> <div> <Button ng-Click = "OK ()"> OK </futton> <Button ng-Click = "Cancel ()"> Annuler </ Button> </div> </cript> <Button ng-Click = "Open ()"> Ouvrir! </futton> </v> <cript> var Modaldemo = angular.module ('Modaldemo', ['Ui.bootsStaSmo =); var modaldeMoCtrl = fonction ($ scope, $ modal, $ log) {$ scope.items = ['item', 'item', 'item']; $ scope.open = function () {var modalinstance = $ modal.open ({templateUrl: 'myModalContent.html', contrôleur: modalinstancierctl, résolve: {items: function () {return $ scope.items;}}}); modalinstance.openened.then (function () {// La fonction exécutée après l'ouverture de la fenêtre modale et console.log ('modal est ouvert');}); modalinstance.result.phen (fonction (résultat) {console.log (résultat);}, fonction (raison) {console.log (raison); // cliquez sur la zone vide, le clic de fond sera toujours sorti. }); }; }; 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 ('annuler'); }; }; </cript> </ body> </html>Ce qui précède est le contenu pertinent de la boîte de mode pop-up angularjs (modèle) présenté par l'éditeur. J'espère que ce sera utile à tous!