В процессе разработки программы GUI часто есть концепции модальных диалоговых окно и немодальных диалоговых окно.
Модальный диалоговое окно: Во время деятельности по интерфейсу ребенка родительское окно не может ответить на сообщение. Эксклюзивный пользовательский ввод
Немодальное диалоговое окно: Нет влияния между Windows
Основные различия: немодальное диалоговое окно разделяет цикл сообщения с приложением и не будет занимать исключительно пользователей.
Диалоговое окно «Модальный» исключительно занимает пользовательский ввод, а другие интерфейсы не могут ответить
Содержание этой статьи
Диалог с шаблоном реализации Angular JS. На основе Angularjs v1.5.3 и Bootstrap v3.3.6.
Структура проекта
Рисунок 1 Структура проекта
Результаты бега
Рисунок 1 Результаты работы: большой режим
index.html
<! Doctype html> <!-[if ie ie 7]>> <html> <! [Endif]-> <!-[i, ie 7]> <html> <! [Endif]-> <!-ie ie 8]> <html> <! 8]> rel = "styleSheet" href = "../ src/vendor/bootstrap/dist/css/bootstrap.css"> </head> <body ng-app = "myApp"> <!-Модальный шаблон-> <script type = "text/ng-template" id = "mymodelcontent.html"> <div> <div> <dlemal> </h3> </3> </3> <dlemalte "/"/htemplate ". <div> <ul> <li ng-repeat = "элемент в элементах"> <a ng-click = "selected.item = item"> {{item}} </a> </li> <div> В настоящее время выбран: <b> {{selected.item}} </b> </div> </ul> </div> <div> <butdine ng-click = "()" () "()" (). ng-click = "cancel ()"> exit </button> </script> <div> angularjs modal dialog </div> <section> <section ng-controller = "modaldemo" style = "margin: 40px auto; float: none; фон: #fff; padding: 30px;"> кнопка ng-click = "open (#fff; padding: 30px;"> кнопка ng-click = " ng-click = "open ()"> modal </button> <button ng-click = "open ('sm')"> маленький модал </button> <hr> <div ng-shef = "selected"> Текущий выбор: {{selected}} </div> </section> </section> <!-загрузка 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> <script src = "../ src/js/mymodal.js"> </script> </body> </html>mymodal.js
/** * */angular.module ('myApp', ['ui.bootstrap']) // demo controller.controller ('modaldemo', функция ($ scope, $ modal, $ log) {// Перечислите $ scope.items = ['angularjs', 'Backbone', 'canjs', 'ember' ember 'resect rave -scarec rafe -scape scue -scape $ scue -scept' resect vact vact vact valict '//pect scue -scep'/. Function (size) {var modalinstance = $ modal.open ({templateurl: 'mymodelcontent.html', controller: 'modalinstancectert', // Указание контроллера для модального размера: размер, разрешение: {элементы: function () {return $ scope.items;}}}); modalinstance.result.then (function (selecteditem) {$ scope.selected = selecteditem;}, function () {$ log.info ('Modal Controller. = eptions;Приведенное выше контент - это диалоговое окно AngularJS Modal, введенное вам редактором. Я надеюсь, что это будет полезно для всех!