详解AngularJS模态对话框

在涉及图像使用者界面程序开发的过程中，常常有模态对话框以及非模态对话框的概念

模态对话框：在子界面活动期间，父窗口是无法进行消息响应。独占用户输入

非模态对话框：各窗口之间不影响

主要区别：非模态对话框与应用共用消息循环，不会独占用户。

模态对话框独占用户输入，其他界面无法响应

本文内容

角度射流研究…实现模式对话框。基于AngularJS v1.5.3和自举3。3 .6 .

项目结构

图一项目结构

运行结果

图一运行结果：大模态

index.html

！DOCTYPE html！-[if lt IE 7]html class=' no-js lt-ie9 lt-ie8 lt-ie7 '！-!-[if IE 7]html class=' no-js lt-ie9 lt-ie8 '！-!- [if IE 8] html class='no-js lt-ie9 '！-!- [if gt IE 8]！- html类='no-js '！- ![endif]-hearta charset=' UTF-8 ' meta http-equiv=' X-UA-Compatible ' content=' IE=edge，chrome=1 ' meta name=' viewport ' content=' width=device-width ' title anglarjs模态对话框/titlelink rel='样式表href='./src/厂商/bootstrap/dist/CSS/bootstrap。CSS/head body ng-app=' myApp ' class=' body '！-模态模板-脚本类型=' text/ng-template ' id=' mymodeldcontent。html ' div class=' modal-header ' H3 class=' modal-title '模态框/H3/div class=' modal-body ' ul Li ng-repeat=' items in items ' a ng-click='选中。item=item " { item } }/a/Li div class=' H2 '当前选择：{ {选中。item } }/div/ul/div class=' modal-footer '按钮'=' BTN BTN-小学' ng-click=' ok()'确认/button button class=' BTN BTN-警告' ng-click=' cancel()'退出/button/div/script div class=' container h1 ' AngularJS模态对话框/div section class=' row ' section ng-controller=' modalDemo ' class=' col-MD-6 ' style=' margin 3360 40px auto；浮动：无；背景# fffpadding : 30pxbutton class=' BTN BTN-默认' ng-click=' open '(' LG ')大模态/button button class=' BTN BTN-默认' ng-click=' open()'中模态/button button class=' BTN BTN-默认' ng-click=' open '(sm)小模态/button HR div class=' h1 ' ng-show=' selected '当前选择：{ {选定}}/div /section /section！-加载js -脚本src='http:/src/供应商/角度/角度。js /脚本脚本src='http:http://cdn。bootscs。com/angular-ui-bootstrap/0。11 .2/ui-bootstrap-TPS。js /脚本脚本src=' http :/src/js/my modal。js '/script/body/html我的模态。射流研究…

/** * */angular.module('myApp '，[' ui。bootstrap '])//演示控制器。controller(' modalDemo '，function($scope，$modal，$ log){//list $ scope。items=[' angular js '，' backbone '，' canjs '，' Ember '，' react ']；//打开单击$ scope。open=function(size){ var modalInstance=$ modal。打开({模板URL : ' mymodeldcontent。html '，控制器： ' modalinstancelectrl '，//指定控制器为模态尺寸：尺寸，解析： { items : function(){ return $ scope。物品；} } });//模态返回结果modalinstance。结果。然后(function(selectedItem){ $ scope。selected=selectedItem}，function() { $log.info('Modal在： '新日期())时被解除)});} })//模态控制器。controller(' modalinstcrel '，function($scope，$modalInstance，items){ $ scope。项目=项目；$ scope。selected={ item : $ scope。项目[0]}；//确定单击$ scope。ok=function(){ $ modalinstance。close($ scope)。选中。项目)；};//取消单击$ scope。cancel=function(){ $ modalinstance。任务(“取消”)；}});以上内容是小编给大家介绍的AngularJS模态对话框，希望对大家有所帮助！