Lectura recomendada: explicación detallada del cuadro de diálogo modal de AngularJS
$ Modal es un servicio que puede crear rápidamente ventanas modales, crear parte de las páginas, controladores y asociarlas.
$ modal tiene solo un método abierto (opciones)
TemplateUrl: la dirección de la ventana modal
Plantilla: se usa para mostrar etiquetas HTML
Alcance: el uso de contenido con un alcance modal (de hecho, $ modal creará un subescopio del alcance actual) de forma predeterminada es $ rootscope
Controlador: el controlador especificado para $ modal, inicializa $ alcance, que se puede inyectar con $ modalinstance
Resolver: Defina un miembro y pasarlo al controlador especificado por $ modal. Es equivalente a una propiedad reslove de las rutas. Si necesita pasar un objeto de objeto, debe usar angular.copy ()
fondo: controlar el fondo, valores permitidos: verdadero (predeterminado), falso (sin fondo), "estático": el fondo existe, pero al hacer clic fuera de la ventana modal, la ventana modal no se cierra
Teclado: cuando se presiona ESC, si el cuadro de diálogo modal está cerrado, predeterminado a ture
WindowClass: especifique una clase y agrégala a la ventana modal
El método abierto devuelve una instancia modal, que tiene las siguientes propiedades
Cerrar (resultado): cierre la ventana modal y pase un resultado
despedir (razón): deshacer el método modal y pasar una razón
Resultado: un contrato que se pasa cuando la ventana modal está cerrada o revocada
abierto: un contrato, una variable aprobada cuando se abre la ventana modal y el contenido está cargado
Además, $ ModalInstance extiende dos métodos $ cierre (resultado), $ desestimación (razón), que cierre fácilmente Windows y no requieren controladores adicionales
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> <script> src = "lib/bootstrap-gh-pages/ui-bootstrap-tpls -... min.js"> </script> <script src = "lib/angular/in/angular-loce_zh-cn.js"> </script> </head> <body> <d div ng-concroller = "modalDemoctrl"> <script type = "text/ngy" textate " id = "mymodalContent.html"> <div> <h> Soy un modal! </h> </div> <div> <li> <li ng-depheat = "items en elementos"> <a ng-click = "selection.item = item"> {{item}}} </a> </li> </ul> seleccionado: <b> {{{{item " <Div> <Botton ng-click = "ok ()"> ok </boton> <button ng-click = "cancel ()"> cancelar </botón> </div> </script> <botón ng-click = "abre ()"> ¡Abrirme! </botón> </div> <script> var modalDemo = angular.module ('modalDemo', ['ui.bootstrap']); var modalDemoctrl = function ($ scope, $ modal, $ log) {$ scope.items = ['elemento', 'elemento', 'elemento']; $ scope.open = function () {var modalInstance = $ modal.open ({TemplateUrl: 'mymodalContent.html', controlador: modalinstancectl, resolve: {elementos: function () {return $ scope.items;}}}); modalinstance.opened.then (function () {// La función ejecutada después de que se abre la ventana modal y console.log ('modal se abre');}); modalinstance.result.then (function (resultado) {console.log (resultado);}, function (razon) {console.log (razon); // Haga clic en el área en blanco, el clic del fondo siempre se emitirá. Haga clic en Cancelar, y el verano se cancelará $ log.info ('modal descartado en:' + nueva fecha ());}); }); }; }; var modalInStancectl = function ($ scope, $ modalInstance, elementos) {$ scope.items = elementos; $ scope.selected = {item: $ scope.items []}; $ scope.ok = function () {$ modalInstance.close ($ scope.selected); }; $ scope.cancel = function () {$ modalInstance.dismiss ('cancelar'); }; }; </script> </body> </html>Lo anterior es el contenido relevante del cuadro de modo emergente AngularJS (modelo) introducido por el editor. ¡Espero que sea útil para todos!