详解AngularJS 模态对话框


Posted in Javascript onApril 07, 2016

在涉及GUI程序开发的过程中,常常有模态对话框以及非模态对话框的概念

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

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

主要区别:非模态对话框与APP共用消息循环,不会独占用户。

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

本文内容

Angular JS 实现模式对话框。基于 AngularJS v1.5.3 和 Bootstrap v3.3.6。

项目结构

详解AngularJS 模态对话框 

图 1 项目结构

运行结果

详解AngularJS 模态对话框详解AngularJS 模态对话框

图 1 运行结果:大模态

index.html

<!DOCTYPE html>
<!--[if lt IE 7]> 
<html class="no-js lt-ie9 lt-ie8 lt-ie7">
<![endif]--><!--[if IE 7]> 
<html class="no-js lt-ie9 lt-ie8">
<![endif]--><!--[if IE 8]> 
<html class="no-js lt-ie9"> 
<![endif]--><!--[if gt IE 8]><!--><html class="no-js"><!--<![endif]--><head>
<meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"><meta name="viewport" content="width=device-width"><title>AngularJS 模态对话框</title><link rel="stylesheet" 
href="../src/vendor/bootstrap/dist/css/bootstrap.css">
</head>
<body ng-app="myApp" class="body"> 
<!-- modal template --> 
<script type="text/ng-template" id="myModelContent.html"> 
<div class="modal-header"> 
<h3 class="modal-title">模态框</h3> 
</div> 
<div class="modal-body"> 
<ul> 
<li ng-repeat="item in items"> 
<a ng-click="selected.item = item">{{item}}</a> 
</li> 
<div class="h2">当前选择:
<b>{{selected.item}}</b></div> 
</ul> 
</div> 
<div class="modal-footer"> 
<button class="btn btn-primary" ng-click="ok()"> 
确认 
</button> 
<button class="btn btn-warning" 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: 40px auto; float: none; background: #fff; padding: 30px;"> 
<button class="btn btn-default" ng-click="open('lg')">大模态</button> 
<button class="btn btn-default" ng-click="open()">中模态</button> 
<button class="btn btn-default" ng-click="open('sm')">小模态</button> 
<hr> 
<div class="h1" ng-show="selected">当前选择:{{selected}}</div> 
</section> 
</section> 
<!-- load 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', function($scope, $modal, $log) 
{ 
// list 
$scope.items = [ 'angularjs', 'backbone', 'canjs', 'Ember', 'react' ]; 
// open click 
$scope.open = function(size) 
{ 
var modalInstance = $modal.open({ 
templateUrl : 'myModelContent.html', 
controller : 'ModalInstanceCtrl', // specify controller for modal 
size : size, 
resolve : { 
items : function() 
{ 
return $scope.items; 
} 
} 
}); 
// modal return result 
modalInstance.result.then(function(selectedItem)
{ 
$scope.selected = selectedItem; 
}, function() 
{ 
$log.info('Modal dismissed at: ' + new Date()) 
}); 
}})// modal controller.controller('ModalInstanceCtrl', function($scope, $modalInstance, items) 
{ 
$scope.items = items; 
$scope.selected = 
{ 
item : $scope.items[0] 
}; 
// ok click 
$scope.ok = function()
{ 
$modalInstance.close($scope.selected.item); 
}; 
// cancel click 
$scope.cancel = function() 
{ 
$modalInstance.dismiss('cancel'); 
}});

以上内容是小编给大家介绍的AngularJS 模态对话框 ,希望对大家有所帮助!

Javascript 相关文章推荐
IE中jquery.form中ajax提交没反应解决方法分享
Sep 11 Javascript
showModalDialog模态对话框的使用详解以及浏览器兼容
Jan 11 Javascript
get(0).tagName获得作用标签示例代码
Oct 08 Javascript
jQuery使用after()方法在元素后面添加多项内容的方法
Mar 26 Javascript
jQuery+json实现的简易Ajax调用实例
Dec 14 Javascript
BootStrap点击下拉菜单项后显示一个新的输入框实现代码
May 16 Javascript
Bootstrap编写一个兼容主流浏览器的受众巨幕式风格页面
Jul 01 Javascript
jquery动态遍历Json对象的属性和值的方法
Jul 27 Javascript
JavaScript编码风格指南(中文版)
Aug 26 Javascript
vue使用drag与drop实现拖拽的示例代码
Sep 07 Javascript
Vue2.5通过json文件读取数据的方法
Feb 27 Javascript
Node.js实现简单的爬取的示例代码
Jun 25 Javascript
分离与继承的思想实现图片上传后的预览功能:ImageUploadView
Apr 07 #Javascript
jQuery动态添加
Apr 07 #Javascript
javascript模块化简单解析
Apr 07 #Javascript
jquery编写Tab选项卡滚动导航切换特效
Jul 17 #Javascript
js仿QQ中对联系人向左滑动、滑出删除按钮的操作
Apr 07 #Javascript
jQuery实现简单滚动动画效果
Apr 07 #Javascript
基于javascript bootstrap实现生日日期联动选择
Apr 07 #Javascript
You might like
PHP中使用php5-ffmpeg撷取视频图片实例
2015/01/07 PHP
基于php中echo用逗号和用点号的区别详解
2018/01/23 PHP
PHP数组遍历的几种常见方式总结
2019/02/15 PHP
关于laravel-admin ueditor 集成并解决刷新的问题
2019/10/21 PHP
Extjs学习笔记之二 初识Extjs之Form
2010/01/07 Javascript
JS request函数 用来获取url参数
2010/05/17 Javascript
Jquery CheckBox全选方法代码附js checkbox全选反选代码
2010/06/09 Javascript
过虑特殊字符输入的js代码
2010/08/05 Javascript
基于jquery的loading 加载提示效果实现代码
2011/09/01 Javascript
基于jquery实现拆分姓名的方法(纯JS版)
2013/05/08 Javascript
Chrome下ifame父窗口调用子窗口的问题示例探讨
2014/03/17 Javascript
javascript中replace( )方法的使用
2015/04/24 Javascript
jQuery取消特定的click事件
2016/02/29 Javascript
JS生成不重复的随机数组的简单实例
2016/07/10 Javascript
基于es6三点运算符的使用方法(实例讲解)
2017/10/12 Javascript
详解vue-cli脚手架build目录中的dev-server.js配置文件
2017/11/24 Javascript
利用vue + element实现表格分页和前端搜索的方法
2017/12/25 Javascript
jquery实现企业定位式导航效果
2018/01/01 jQuery
vue项目持久化存储数据的实现代码
2018/10/01 Javascript
JS使用H5实现图片预览功能
2019/09/30 Javascript
微信小程序vant弹窗组件的实现方式
2020/02/21 Javascript
[01:19:46]EG vs Secret 2019国际邀请赛淘汰赛 胜者组 BO3 第二场 8.21.mp4
2020/07/19 DOTA
Python 初始化多维数组代码
2008/09/06 Python
Python中基本的日期时间处理的学习教程
2015/10/16 Python
Python的GUI框架PySide的安装配置教程
2016/02/16 Python
centos6.7安装python2.7.11的具体方法
2017/01/16 Python
Python中的TCP socket写法示例
2018/05/11 Python
Django框架实现逆向解析url的方法
2018/07/04 Python
django foreignkey(外键)的实现
2019/07/29 Python
手把手教你实现一个canvas智绘画板的方法
2019/03/04 HTML / CSS
贪睡宠物用品:Snoozer Pet Products
2020/02/04 全球购物
英语硕士生求职简历的自我评价
2013/10/15 职场文书
充分就业社区汇报材料
2014/05/07 职场文书
乡村教师党员四风问题对照检查材料思想汇报
2014/10/08 职场文书
如何在Python中创建二叉树
2021/03/30 Python
nginx.conf配置文件结构小结
2022/04/08 Servers