En el proceso de desarrollo del programa GUI, a menudo hay conceptos de cuadros de diálogo modales y cuadros de diálogo no modales.
Diálogo modal: durante la actividad de la interfaz infantil, la ventana principal no puede responder al mensaje. Entrada exclusiva del usuario
Cuadro de diálogo no modal: sin efecto entre Windows
Diferencias principales: el cuadro de diálogo no modal comparte el bucle de mensaje con la aplicación y no ocupará exclusivamente usuarios.
El cuadro de diálogo modal ocupa exclusivamente la entrada del usuario, y otras interfaces no pueden responder
Contenido de este artículo
Diálogo del patrón de implementación de JS angular. Basado en AngularJS V1.5.3 y Bootstrap v3.3.6.
Estructura de proyectos
Figura 1 Estructura del proyecto
Resultados de ejecución
Figura 1 Resultados de la operación: modo grande
index.html
< 8]> <!-> <html> <!-<!-< rel = "stylesheet" href = "../ src/proveor/bootstrap/dist/css/bootstrap.css"> </head> <body ng-app = "myapp"> <!-modal plantlate-> <script type = "text/ng-template" id = "mymodelContent.html"> <div> <h3> h3al <h3 <h3i </div> <div> <ul> <li ng-repeat = "items in items"> <a ng-Click = "selection.item = item"> {{item}} </a> </li> <div> actualmente seleccionado: <b> {{selection.item}}} </b> </iv> </ul> </div> <div> <botón ng-click = "Button" ng-click = "cancel ()"> Salir </boton> </script> <iv> Angularjs Diálogo modal </div> <section> <sección ng-confontroller = "modalDemo" style = "margin: 40px Auto; float: Ninguno; fondo: #fff; remar: 30px;"> <botón ng-click = "abierto ('lg') ng-Click = "abre ()"> modal </boton> <botón ng-Click = "abre ('sm')"> pequeño modal </botton> <hr> <div ng ng-show = "seleccionado"> selección actual: {{seleccionado}} </div> </section> </section> <!-cargue js-> <script src = "../ src/vendor/angular/angular.js"> </script> <script src = "http://cdn.bootcss.com/angular-ui-bootstrap/0.11.2/ui-bootstrap-tpls.js"> </script> <scry src = "../ src/js/mymodal.js"> </script> </body> </html>mymodal.js
/** * */angular.module ('myApp', ['ui.bootstrap']) // demo controler.controller ('modalDemo', function ($ scope, $ modal, $ log) {// list $ scope.items = ['angularjs', 'backbone', 'canjs', 'ember', 'react']; function (size) {var modalInstance = $ modal.open ({TemplateUrl: 'myModelContent.html', controlador: 'ModalInstancectrl', // Especifique el controlador para el tamaño modal: size, resolución: {elementos: function () {return $ spop.items;}}); modalinstance.result.then (function (selectionItem) {$ scope.selected = selectionItem;}, function () {$ log.info ('modal desestimado en:' + new date ())}); Elementos;El contenido anterior es el cuadro de diálogo Modal AngularJS que le presenta el editor. ¡Espero que sea útil para todos!