AngularJs 弹出模态框(model)


Posted in Javascript onApril 07, 2016

推荐阅读:详解AngularJS 模态对话框

$modal是一个可以迅速创建模态窗口的服务,创建部分页,控制器,并关联他们。

$modal仅有一个方法open(options)

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),这些方法很容易关闭窗口并且不需要额外的控制器

HTML

<!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-...min.js"></script> 
<script src="lib/angular/in/angular-locale_zh-cn.js"></script> 
</head> 
<body> 
<div ng-controller="ModalDemoCtrl"> 
<script type="text/ng-template" id="myModalContent.html"> 
<div class="modal-header"> 
<h>I'm a modal!</h> 
</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 = ['item', 'item', 'item']; 
$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[] 
}; 
$scope.ok = function () { 
$modalInstance.close($scope.selected); 
}; 
$scope.cancel = function () { 
$modalInstance.dismiss('cancel'); 
}; 
}; 
</script> 
</body> 
</html>

以上所述是小编给大家介绍的AngularJs 弹出模态框(model)的相关内容,希望对大家有所帮助!

Javascript 相关文章推荐
通过JS 获取Mouse Position(鼠标坐标)的代码
Sep 21 Javascript
目前流行的JavaScript库的介绍及对比
Sep 29 Javascript
Javascript中this关键字的一些小知识
Mar 15 Javascript
js前端解决跨域问题的8种方案(最新最全)
Nov 18 Javascript
浅析JavaScript中var that=this
Feb 17 Javascript
js es6系列教程 - 新的类语法实战选项卡(详解)
Sep 02 Javascript
JS设计模式之状态模式概念与用法分析
Feb 05 Javascript
关于vue状态过渡transition不起作用的原因解决
Apr 09 Javascript
vue实现扫码功能
Jan 17 Javascript
JavaScript实现Excel表格效果
Feb 07 Javascript
JavaScript流程控制(循环)
Dec 06 Javascript
浅谈Vue的computed计算属性
Mar 21 Vue.js
详解AngularJS 模态对话框
Apr 07 #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
You might like
PHP面向对象编程之深入理解方法重载与方法覆盖(多态)
2015/12/24 PHP
浅谈PHP实现大流量下抢购方案
2017/12/15 PHP
用Laravel轻松处理千万级数据的方法实现
2020/12/25 PHP
setTimeout和setInterval的浏览器兼容性分析
2007/02/27 Javascript
Document 对象的常用方法
2009/07/31 Javascript
JavaScript 异步调用框架 (Part 1 - 问题 &amp; 场景)
2009/08/03 Javascript
js实现运动logo图片效果及运动元素对象sportBox使用方法
2012/12/25 Javascript
javascript操作excel生成报表示例
2014/05/08 Javascript
深入讲解AngularJS中的自定义指令的使用
2015/06/18 Javascript
针对初学者的jQuery入门指南
2015/08/15 Javascript
jquery实现树形菜单完整代码
2015/12/29 Javascript
js表单处理中单选、多选、选择框值的获取及表单的序列化
2016/03/08 Javascript
修复jQuery tablesorter无法正确排序的bug(加千分位数字后)
2016/03/30 Javascript
JS在一定时间内跳转页面及各种刷新页面的实现方法
2016/05/26 Javascript
vue移动端裁剪图片结合插件Cropper的使用实例代码
2017/07/10 Javascript
使用Angular CLI从蓝本生成代码详解
2018/03/24 Javascript
基于JavaScript实现瀑布流布局
2018/08/15 Javascript
JavaScript提升机制Hoisting详解
2019/10/23 Javascript
H5实现手机拍照和选择上传功能
2019/12/18 Javascript
vue在图片上传的时候压缩图片
2020/11/18 Vue.js
Python的组合模式与责任链模式编程示例
2016/02/02 Python
Python selenium文件上传方法汇总
2020/11/19 Python
对numpy中布尔型数组的处理方法详解
2018/04/17 Python
python实现微信小程序自动回复
2018/09/10 Python
Django 开发调试工具 Django-debug-toolbar使用详解
2019/07/23 Python
django 解决model中类写不到数据库中,数据库无此字段的问题
2020/05/20 Python
python实现批量命名照片
2020/06/18 Python
python实现简单文件读写函数
2021/02/25 Python
移动web模拟客户端实现多方框输入密码效果【附代码】
2016/03/25 HTML / CSS
应届生会计求职信
2013/11/11 职场文书
《伯牙绝弦》教学反思
2014/03/02 职场文书
毕业生个人自荐书
2015/03/05 职场文书
2015年惩防体系建设工作总结
2015/05/22 职场文书
Go 语言中 20 个占位符的整理
2021/10/16 Golang
Python可视化神器pyecharts绘制地理图表
2022/07/07 Python
Python使用plt.boxplot()函数绘制箱图、常用方法以及含义详解
2022/08/14 Python