详解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 相关文章推荐
JavaScript获取某年某月的最后一天附截图
Jun 23 Javascript
实例详解jQuery结合GridView控件的使用方法
Jan 04 Javascript
JavaScript引用类型和基本类型详解
Jan 06 Javascript
使用do...while的方法输入一个月中所有的周日(实例代码)
Jul 22 Javascript
jQuery实现点击某个div打开层,点击其他div关闭层实例分析(阻止冒泡)
Nov 18 Javascript
Vue 2.0 服务端渲染入门介绍
Mar 29 Javascript
Bootstrap滚动监听组件scrollspy.js使用方法详解
Jul 20 Javascript
基于JavaScript实现控制下拉列表
May 08 Javascript
Vue实现可移动水平时间轴
Jun 29 Javascript
JavaScript之scrollTop、scrollHeight、offsetTop、offsetHeight等属性学习笔记
Jul 15 Javascript
解决vuex刷新数据消失问题
Nov 12 Javascript
vue 使用class创建和清除水印的示例代码
Dec 25 Vue.js
分离与继承的思想实现图片上传后的预览功能: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输出缓存(output_buffering)的深入理解
2013/06/13 PHP
PHP命名空间(namespace)的动态访问及使用技巧
2014/08/18 PHP
php使用cookie保存用户登录的用户名实例
2015/01/26 PHP
Yii 2.0在Grid中格式化时间方法示例
2017/06/06 PHP
微信JSSDK分享功能图文实例详解
2019/04/08 PHP
JS函数重载的解决方案
2014/05/13 Javascript
js中的如何定位固定层的位置
2014/06/15 Javascript
JavaScript设计模式开发中组合模式的使用教程
2016/05/18 Javascript
js+html5实现canvas绘制椭圆形图案的方法
2016/05/21 Javascript
原生js的数组除重复简单实例
2016/05/24 Javascript
vue自定义指令实现v-tap插件
2016/11/03 Javascript
jQuery基于xml格式数据实现模糊查询及分页功能的方法
2016/12/25 Javascript
详解Angular-cli生成组件修改css成less或sass的实例
2017/07/27 Javascript
浅谈JavaScript中的属性:如何遍历属性
2017/09/14 Javascript
Bootstrap导航菜单点击后无法自动添加active的处理方法
2018/08/10 Javascript
解决layui前端框架 form表单,table表等内置控件不显示的问题
2018/08/19 Javascript
jQuery+css实现的点击图片放大缩小预览功能示例【图片预览 查看大图】
2020/05/29 jQuery
pandas 使用apply同时处理两列数据的方法
2018/04/20 Python
Python字符串的全排列算法实例详解
2019/01/07 Python
Python OpenCV图像指定区域裁剪的实现
2019/10/30 Python
python分布式计算dispy的使用详解
2019/12/22 Python
解决Pycharm中恢复被exclude的项目问题(pycharm source root)
2020/02/14 Python
Django Haystack 全文检索与关键词高亮的实现
2020/02/17 Python
解决django xadmin主题不显示和只显示bootstrap2的问题
2020/03/30 Python
Python之字典添加元素的几种方法
2020/09/30 Python
使用python实现学生信息管理系统
2021/02/25 Python
意大利大型购物中心:Oliviero.it
2017/10/19 全球购物
英国电子产品购物网站:TobyDeals
2018/07/30 全球购物
Skyscanner加拿大:全球旅行搜索平台
2018/11/19 全球购物
台湾演唱会订票网站:StubHub台湾
2019/06/11 全球购物
Servlet面试题库
2015/07/18 面试题
董事长秘书职责
2014/01/31 职场文书
大学信息公开实施方案
2014/03/09 职场文书
希特勒经典演讲稿
2014/05/19 职场文书
Mybatis是这样防止sql注入的
2021/12/06 Java/Android
JS封装cavans多种滤镜组件
2022/02/15 Javascript