AngularJS  $modal弹出框实例代码


Posted in Javascript onAugust 24, 2016

下面给大家说下$modal拥有一个方法:open,该方法的属性介绍:

templateUrl:模态窗口的地址

template:用于显示html标签

scope:一个作用域为模态的内容使用(事实上,$modal会创建一个当前作用域的子作用域)默认为$rootScope

controller:为$modal指定的控制器,初始化$scope,该控制器可用$modalInstance注入

resolve:定义一个成员并将他传递给$modal指定的控制器,相当于routes的一个reslove属性,如果需要传递一个objec对象,需要使用angular.copy()

backdrop:控制背景,允许的值:true(默认),false(无背景),“static” - 背景是存在的,但点击模态窗口之外时,模态窗口不关闭

keyboard:当按下Esc时,模态对话框是否关闭,默认为ture

windowClass:指定一个class并被添加到模态窗口中

open方法返回一个实例,该实例具有如下属性:

close(result):关闭模态窗口并传递一个结果

dismiss(reason):撤销模态方法并传递一个原因

result:一个契约,当模态窗口被关闭或撤销时传递

opened:一个契约,当模态窗口打开并且加载完内容时传递的变量

另外,$modalInstance扩展了两个方法$close(result)、$dismiss(reason),这些方法很容易关闭窗口并且不需要额外的控制器

<!DOCTYPE html>
<html ng-app="ModalDemo">
<head>
<title></title>
<link href="lib/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<script src="lib/angular/angular.min.js"></script>
<script src="lib/bootstrap-gh-pages/ui-bootstrap-tpls-0.7.0.min.js"></script>
<script src="lib/angular/i18n/angular-locale_zh-cn.js"></script>
</head>
<body>
<div ng-controller="ModalDemoCtrl">
<script type="text/ng-template" id="myModalContent.html" />
<div class="modal-header">
<h3>I'm a modal!</h3>
</div>
<div class="modal-body">
<ul>
<li ng-repeat="item in items"><a
ng-click="selected.item = item">{{ item }}</a></li>
</ul>
Selected: <b>{{ selected.item }}</b>
</div>
<div class="modal-footer">
<button class="btn btn-primary" ng-click="ok()">OK</button>
<button class="btn btn-warning" ng-click="cancel()">Cancel</button>
</div>
</script>
<button class="btn" ng-click="open()">Open me!</button>
</div>
<script>
var ModalDemo = angular.module('ModalDemo', [ 'ui.bootstrap' ]);
var ModalDemoCtrl = function($scope, $modal, $log) {
$scope.items = [ 'item1', 'item2', 'item3' ];
$scope.open = function() {
var modalInstance = $modal.open({
templateUrl : 'myModalContent.html',
controller : ModalInstanceCtrl,
resolve : {
items : function() {
return $scope.items;
}
}
});
modalInstance.opened.then(function() {// 模态窗口打开之后执行的函数
console.log('modal is opened');
});
modalInstance.result.then(function(result) {
console.log(result);
}, function(reason) {
console.log(reason);// 点击空白区域,总会输出backdrop
// click,点击取消,则会暑促cancel
$log.info('Modal dismissed at: ' + new Date());
});
};
};
var ModalInstanceCtrl = function($scope, $modalInstance, items) {
$scope.items = items;
$scope.selected = {
item : $scope.items[0]
};
$scope.ok = function() {
$modalInstance.close($scope.selected);
};
$scope.cancel = function() {
$modalInstance.dismiss('cancel');
};
};
</script>
</body>
</html>

以上所述是小编给大家介绍的AngularJS  $modal弹出框实例代码,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
JQuery 图片延迟加载并等比缩放插件
Nov 09 Javascript
基于Jquery的标签智能验证实现代码
Dec 27 Javascript
多个表单中如何获得这个文件上传的网址实现js代码
Mar 25 Javascript
javascript中数组的sort()方法的使用介绍
Dec 18 Javascript
Blocksit插件实现瀑布流数据无限( 异步)加载
Jun 20 Javascript
node.js中的fs.linkSync方法使用说明
Dec 15 Javascript
node.js中的fs.createReadStream方法使用说明
Dec 17 Javascript
Three.js学习之网格
Aug 10 Javascript
基于Node.js的WebSocket通信实现
Mar 11 Javascript
利用vscode编写vue的简单配置详解
Jun 17 Javascript
mpvue微信小程序的接口请求fly全局拦截代码实例
Nov 13 Javascript
vue element-ui实现动态面包屑导航
Dec 23 Javascript
AngularJS中比较两个数组是否相同
Aug 24 #Javascript
javascript深拷贝(deepClone)详解
Aug 24 #Javascript
js实现无缝循环滚动
Jun 23 #Javascript
jquery实现网页定位导航
Aug 23 #Javascript
Jquery组件easyUi实现手风琴(折叠面板)示例
Aug 23 #Javascript
Javascript将JSON日期格式化
Aug 23 #Javascript
Jquery组件easyUi实现选项卡切换示例
Aug 23 #Javascript
You might like
PHP中使用循环实现的金字塔图形
2014/11/08 PHP
php实现网站文件批量压缩下载功能
2015/10/28 PHP
PHP文字转图片功能原理与实现方法分析
2017/08/31 PHP
通过ifame指向的页面高度调整iframe的高度
2006/10/05 Javascript
让任务管理器中的CPU跳舞的js代码
2008/11/01 Javascript
21个JavaScript事件(Events)属性汇总
2014/12/02 Javascript
JS实现的数组全排列输出算法
2015/03/19 Javascript
Javascript中的包装类型介绍
2015/04/02 Javascript
jQuery插件Slider Revolution实现响应动画滑动图片切换效果
2015/06/05 Javascript
jQuery实现简单的文件上传进度条效果
2020/03/26 Javascript
JS当前页面登录注册框,固定DIV,底层阴影的实例代码
2016/09/29 Javascript
实例解析jQuery工具函数
2016/12/01 Javascript
springmvc接收jquery提交的数组数据代码分享
2017/10/28 jQuery
最后说说Vue2 SSR 的 Cookies 问题
2018/05/25 Javascript
js中事件对象和事件委托的介绍
2019/01/21 Javascript
详解vuejs中执行npm run dev出现页面cannot GET/问题
2020/04/26 Javascript
微信小程序国际化探索实现(附源码地址)
2020/05/20 Javascript
[04:02]DOTA2上海特锦赛小组赛第二日recap精彩回顾
2016/02/28 DOTA
使用Python中的greenlet包实现并发编程的入门教程
2015/04/16 Python
dataframe 按条件替换某一列中的值方法
2019/01/29 Python
Django项目基础配置和基本使用过程解析
2019/11/25 Python
Pytorch的mean和std调查实例
2020/01/02 Python
HTML5的结构和语义(1):前言
2008/10/17 HTML / CSS
教你使用Canvas处理图片的方法
2017/11/28 HTML / CSS
Finishline官网:美国一家领先的运动品牌鞋类、服装零售商
2016/07/20 全球购物
英国家庭、花园、汽车和移动解决方案:Easylife Group
2018/05/23 全球购物
印度购买眼镜和太阳镜网站:Coolwinks
2018/09/26 全球购物
美国中西部家用医疗设备商店:Med Mart(轮椅、踏板车、升降机等)
2019/04/26 全球购物
STP的判定过程
2012/10/01 面试题
学校采购员岗位职责
2014/01/02 职场文书
学生打架检讨书大全
2014/01/23 职场文书
自我鉴定书
2014/03/24 职场文书
社区学习雷锋活动总结
2014/04/25 职场文书
作弊检讨书
2015/01/27 职场文书
高中军训感想
2015/08/07 职场文书
redis使用不当导致应用卡死bug的过程解析
2021/07/01 Redis