Рекомендуемое чтение: подробное объяснение модального диалогового окна AngularJSS
$ modal - это сервис, которая может быстро создавать модальные окна, создавать часть страниц, контроллеров и ассоциировать их.
$ modal имеет только один метод открыт (параметры)
Шаблон: адрес модального окна
Шаблон: используется для отображения тегов HTML
Сфера применения: использование контента с модальной областью (на самом деле, $ modal создаст подсказку текущего объема) по умолчанию $ rootscope
Контроллер: контроллер, указанный для $ modal, инициализирует область $, который может быть введен в $ modalinstance
Решение: Определите участника и передайте его контроллеру, указанному $ modal. Это эквивалентно свойству Reslove маршрутов. Если вам нужно пройти объект объекта, вам нужно использовать angular.copy ()
Фон: управляйте фоном, допустимые значения: true (по умолчанию), false (без фона), «статический» - фон существует, но при нажатии за пределы модального окна модальное окно не закрывается
Клавиатура: когда нажат ESC, будет ли закрыто модальное диалоговое окно, по умолчанию, чтобы Ture
Windowclass: укажите класс и добавьте его в модальное окно
Метод Open возвращает модальный экземпляр, который имеет следующие свойства
Закрыть (результат): закройте модальное окно и пройдите результат
Уволить (причина): отмените модальный метод и пропустите причину
Результат: контракт, который выполняется, когда модальное окно закрыто или отозвано
Открыт: контракт, переменная, пройденная, когда откроется модальное окно и загружается содержание
Кроме того, $ modalinStance расширяет два метода $ vall (результат), $ увольнение (разум), который легко закрывает окна и не требует дополнительных контроллеров
HTML
<! Doctype html> <html ng-app = "modaldemo"> <head> <title> </title> <link href = "lib/bootstrap/css/bootstrap.min.css" rel = "stylesheet"> <script src = "lib/angular.jsjs" 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-controler = "modaldemoctrl"> <script = ng-teyte yextter = "script =" script = "script =" script = "script =" ng-controller = " id = "mymodalcontent.html"> <div> <h> я модальный! </div> <div> <button ng-click="ok()">OK</button> <button ng-click="cancel()">Cancel</button> </div> </script> <button ng-click="open()">Open me!</button> </div> <script> var ModalDemo = angular.module('ModalDemo', ['ui.bootstrap']); var modaldemoctrl = function ($ scope, $ modal, $ log) {$ scope.items = ['item', 'item', 'item']; $ scope.open = function () {var modalinstance = $ modal.open ({templateurl: 'mymodalcontent.html', controller: modalinstancectrectrl, resolve: {election: function () {return $ scope.items;}}}); modalinstance.opened.then (function () {// Функция, выполняемая после открытия модального окна, и console.log ('Модальный открыт');}); modalinstance.result.then (function (result) {console.log (result);}, function (anouse) {console.log (разум); // Нажмите на пустую область, на фоне клик всегда будет выводиться. Нажмите отменить, и лето будет отменено $ log.info ('модальный отбрасывается по адресу:' + new Date ()); }); }; }; var modalinstancectrect = function ($ racpope, $ modalinstance, элементы) {$ scope.items = элементы; $ scope.selected = {item: $ scope.items []}; $ scope.ok = function () {$ modalinstance.close ($ scope.selected); }; $ scope.cancel = function () {$ modalinstance.dismiss ('cancel'); }; }; </script> </body> </html>Выше приведено соответствующее содержание AngularJs Pop-Up Mode Box (модель), представленное вам редактором. Я надеюсь, что это будет полезно для всех!