详解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 相关文章推荐
列表内容的选择
Jun 30 Javascript
JS效率个人经验谈(8-15更新),加入range技巧
Jan 09 Javascript
JavaScript window.document的属性、方法和事件小结
Oct 24 Javascript
js动态创建表格,删除行列的小例子
Jul 20 Javascript
node.js入门教程
Jun 01 Javascript
js css实现垂直方向自适应的三角提示菜单
Jun 26 Javascript
Vue.js每天必学之方法与事件处理器
Sep 06 Javascript
探究JavaScript中的五种事件处理程序方式
Dec 07 Javascript
angular4实现tab栏切换的方法示例
Oct 21 Javascript
Angular resolve基础用法详解
Oct 03 Javascript
vue基于两个计算属性实现选中和全选功能示例
Feb 08 Javascript
JS实现页面跳转与刷新的方法汇总
Aug 30 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
PHILIPS D1835/D1875的电路分析与打理
2021/03/02 无线电
php实现读取超大文件的方法
2014/07/28 PHP
laravel migrate初学常见错误的解决方法
2017/10/11 PHP
PHP+redis实现微博的拉模型案例详解
2019/07/10 PHP
offsetParent 算法分析
2010/04/05 Javascript
JS Jquery 遍历,筛选页面元素 自动完成(实现代码)
2013/07/08 Javascript
js实现3D图片逐张轮播幻灯片特效代码分享
2015/09/09 Javascript
JS+CSS实现TreeMenu二级树形菜单完整实例
2015/09/18 Javascript
基于jquery实现鼠标滚轮驱动的图片切换效果
2015/10/26 Javascript
AngularJS实现与Java Web服务器交互操作示例【附demo源码下载】
2016/11/02 Javascript
jQuery实现二维码扫描功能
2017/01/09 Javascript
Easyui在treegrid添加控件的实现方法
2017/06/23 Javascript
JS验证码实现代码
2017/09/14 Javascript
详解JSONObject和JSONArray区别及基本用法
2017/10/25 Javascript
vue.js项目中实用的小技巧汇总
2017/11/29 Javascript
jQuery实现鼠标滑过商品小图片上显示对应大图片功能【测试可用】
2018/04/27 jQuery
小程序实现搜索界面 小程序实现推荐搜索列表效果
2019/05/18 Javascript
浅谈ECMAScript 中的Array类型
2019/06/10 Javascript
js实现简单的日历显示效果函数示例
2019/11/25 Javascript
解决Element中el-date-picker组件不回填的情况
2020/11/07 Javascript
JavaScript 中的六种循环方法
2021/01/06 Javascript
[01:54]TI珍贵瞬间系列(三):翻盘
2020/08/28 DOTA
python ElementTree 基本读操作示例
2009/04/09 Python
Python常用内置模块之xml模块(详解)
2017/05/23 Python
Python实现的生成格雷码功能示例
2018/01/24 Python
浅谈Python中重载isinstance继承关系的问题
2018/05/04 Python
使用sklearn进行对数据标准化、归一化以及将数据还原的方法
2018/07/11 Python
python字符串判断密码强弱
2020/03/18 Python
美国经典刺绣和字母儿童服装特卖:Smocked Auctions
2018/07/16 全球购物
CSS代码检查工具stylelint的使用方法详解
2021/03/27 HTML / CSS
简历中个人自我评价范文
2013/12/26 职场文书
学校领导班子对照检查材料
2014/09/24 职场文书
2015年酒店客房部工作总结
2015/04/25 职场文书
上课讲话检讨书范文
2015/05/07 职场文书
java objectUtils 使用可能会出现的问题
2022/02/28 Java/Android
基于Python实现将列表数据生成折线图
2022/03/23 Python