Permettez-moi de vous dire que $ modal a une méthode: ouverte, et les propriétés de cette méthode sont introduites:
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 avec 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
<! 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-0.7.0.min.js"> </ script> <script src = "lib / angular / i18n / angular-locale_zh-cn.js"> </cript> </ad> <body> <div ng-control = "Modaldemtl"> <script> type = "text / ng-template" id = "mymodalcontent.html" /> <div> <h3> Je suis un modal! </h3> </ div> <ul> <li ng-repeat = "item in items"> <ang-click = "selected.item = item"> {{item}} </a> </li> </ul> sélectionné: <b> {{selected. }} </b> </div> <v> <Button ng-Click = "OK ()"> OK </futton> <Button ng-Click = "Cancel ()"> Annuler </ Button> </div> </script> <Button ng-Click = "Open ()"> Ouvrir moi! </button> </div> <cript> var modaldemo = Angular.Module ('Modaldemo, [Script> Var Modaldo = Angular.Module (' Modaldemo, [Script> Var Modaldo = Angular.Module ('Modaldemo, [Script> Var Modaldo = Angular.Module (' MODALDEMO, [Script> 'ui.bootstrap']); var modaldeMoCtrl = fonction ($ scope, $ modal, $ log) {$ scope.items = ['item1', 'item2', 'item3']; $ scope.open = fonction () {var modalinstance = $ modal.open Modalinstancetctrl, résolution: {items: function () {return $ scope.items;}}}); modalinstance.openned.phen (function () {// La fonction exécutée après la fenêtre modale est ouverte et la fond sera toujours sortie Date ());});});};}; var modalinstanceCtrl = function ($ scope, $ modalingance, items) {$ scope.items = items; $ scope.selected = {item: $ scope.items [0]}; $ scope.ok = function () {$ modalinstance.close ($ scope.selled);} $; = function () {$ modalinstance.dismiss ('annuler');};}; </cript> </body> </html>Ce qui précède est le code de la boîte pop-up modal AngularJS $ J'espère que cela vous sera utile. Si vous avez des questions, veuillez me laisser un message et l'éditeur vous répondra à temps. Merci beaucoup pour votre soutien au site Web Wulin.com!