angular ui $modal 使用 option
$modal是一个可以迅速创建模态窗口的服务，创建部分页，控制器，并关联他们
$modal仅有一个方法open(options)
templateUrl：模态窗口的地址template：用于显示html标签scope：一个作用域为模态的内容使用（事实上，$modal会创建一个当前作用域的子作用域）默认为$rootScopecontroller：为$modal指定的控制器，初始化$scope，该控制器可用$modalInstance注入resolve：定义一个成员并将他传递给$modal指定的控制器，相当于routes的一个reslove属性，如果需要传递一个objec对象，需要使用angular.copy()backdrop：控制背景，允许的值：true（默认），false（无背景），“static” - 背景是存在的，但点击模态窗口之外时，模态窗口不关闭keyboard：当按下Esc时，模态对话框是否关闭，默认为turewindowClass：指定一个class并被添加到模态窗口中
open方法返回一个模态实例，该实例有如下属性
close(result)：关闭模态窗口并传递一个结果dismiss(reason)：撤销模态方法并传递一个原因result：一个契约，当模态窗口被关闭或撤销时传递opened：一个契约，当模态窗口打开并且加载完内容时传递的变量
另外，$modalInstance扩展了两个方法$close(result)、$dismiss(reason)，这些方法很容易关闭窗口并且不需要额外的控制器
HTML
1 <!DOCTYPE html>
2 <html ng-app="ModalDemo">
3 <head>
4 <title></title>
5 <link href="lib/bootstrap/css/bootstrap.min.css" rel="stylesheet">
6 <script src="lib/angular/angular.min.js"></script>
7 <script src="lib/bootstrap-gh-pages/ui-bootstrap-tpls-0.7.0.min.js"></script>
8 <script src="lib/angular/i18n/angular-locale_zh-cn.js"></script>
9 </head>
10 <body>
11 <div ng-controller="ModalDemoCtrl">
12 <script type="text/ng-template" id="myModalContent.html">
13 <div class="modal-header">
14 <h3>I‘m a modal!</h3>
15 </div>
16 <div class="modal-body">
17 <ul>
18 <li ng-repeat="item in items">
19 <a ng-click="selected.item = item">{{ item }}</a>
20 </li>
21 </ul>
22 Selected: <b>{{ selected.item }}</b>
23 </div>
24 <div class="modal-footer">
25 <button class="btn btn-primary" ng-click="ok()">OK</button>
26 <button class="btn btn-warning" ng-click="cancel()">Cancel</button>
27 </div>
28 </script>
29 <button class="btn" ng-click="open()">Open me!</button>
30 </div>
31 <script>
32 var ModalDemo = angular.module(‘ModalDemo‘, [‘ui.bootstrap‘]);
33 var ModalDemoCtrl = function ($scope, $modal, $log) {
34 $scope.items = [‘item1‘, ‘item2‘, ‘item3‘];
35 $scope.open = function () {
36 var modalInstance = $modal.open({
37 templateUrl: ‘myModalContent.html‘,
38 controller: ModalInstanceCtrl,
39 resolve: {
40 items: function () {
41 return $scope.items;
42 }
43 }
44 });
45 modalInstance.opened.then(function(){//模态窗口打开之后执行的函数
46 console.log(‘modal is opened‘);
47 });
48 modalInstance.result.then(function (result) {
49 console.log(result);
50 }, function (reason) {
51 console.log(reason);//点击空白区域，总会输出backdrop click，点击取消，则会暑促cancel
52 $log.info(‘Modal dismissed at: ‘ + new Date());
53 });
54 };
55 };
56 var ModalInstanceCtrl = function ($scope, $modalInstance, items) {
57 $scope.items = items;
58 $scope.selected = {
59 item: $scope.items[0]
60 };
61 $scope.ok = function () {
62 $modalInstance.close($scope.selected);
63 };
64 $scope.cancel = function () {
65 $modalInstance.dismiss(‘cancel‘);
66 };
67 };
68 </script>
69 </body>
70 </html>
angular ui $modal 使用 option的更多相关文章
- angular 实现modal windows效果（即模态窗口，半透明的遮罩层），以及bootstrap(css,components,js)的初步学习
废话不说,直接上代码.可直接看效果,对着分析..今天算是bootstrap 入门了,开心.. 突然居然很多事情就是那样,不要太多的畏惧,迈出第一步其实就成功了一半了. <html ng-app= ...
- bootstrap插件学习-bootstrap.modal.js
bootstrap插件学习-bootstrap.modal.js 先从bootstrap.modal.js的结构看起. function($){ var Modal = function(){} // ...
- angular 实现 echarts 拖动区域进行放大 方法
实现逻辑: 1.通过鼠标摁下事件 和弹出事件 获取x轴的index 之后去x轴的list中去获取两个坐标点 2.之后将这两个数据作为参数 传到后台更新数据 3.记录下来这两个坐标点 放到lis ...
- AngularJS进阶(六)AngularJS+BootStrap实现弹出对话框
AngularJS+BootStrap实现弹出对话框 参考资料: http://angular-ui.github.io/bootstrap/#/modal https://www.zybuluo.c ...
- web在线调试
xx <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta h ...
- bootstrap-modal 学习笔记 源码分析
Bootstrap是Twitter推出的一个开源的用于前端开发的工具包,怎么用直接官网 http://twitter.github.io/bootstrap/ 我博客的定位就是把这些年看过的源码给慢慢 ...
- Bootstrap v4.0.0-alpha.5 发布，大量更新
Bootstrap v4.0.0-alpha.5 发布了,Bootstrap是快速开发Web应用程序的前端工具包.它是一个CSS和HTML的集合,它使用了最新的浏览器技术,给你的Web开发提供了时尚的 ...
- AngularJS之ng-options的best practise
废话不多说,直接上代码. function MySelectCtrl($scope) { $scope.Model = [ { id: 10002, MainCategory: '男', Produc ...
- Thymeleaf前后端传值 页面取值与js取值
参考: Thymeleaf前后端传值 页面取值与js取值 Thymeleaf 与 Javascript Thymeleaf教程 (十二) 标签内,js中使用表达式 目的: 后端通过Model传值到前端 ...
随机推荐
- 【Luogu】P2486染色（树链剖分）
题目链接 线段树维护左端颜色,右端颜色,颜色段数量. 合并的时候看左子树的右端颜色是不是等于右子树的左端颜色,如果等于那么颜色段数量要-1S 然后在树剖跳链的时候搞同样的操作qwq 然后就没有然后了 ...
- 【Luogu】P3768简单的数学题（杜教筛）
题目链接 emm标题全称应该叫“莫比乌斯反演求出可狄利克雷卷积的公式然后卷积之后搞杜教筛” 然后成功地困扰了我两天qwq 我们从最基本的题意开始,一步步往下推 首先题面给出的公式是$\sum\limi ...
- POJ 3037 Skiing
Skiing Time Limit: 1000MS Memory Limit: 65536K Total Submissions: 4810 Accepted: 1287 Special ...
- WebRTC入门学习之初识WebRTC （转）
一.WebRTC基本架构 图一 WebRTC总体架构,摘自百度百科 先说说WebRTC大致的实现思路:我们创建的web app,然后在app中调用W3C提供的JS API,JS API 会调用浏览器 ...
- PHP解码Json(json_decode)字符串返回NULL的原因及解决方法（转载）
本文主要为大家讲解了php在使用json_decode函数解码json字符串时,解码不成功返回NULL的问题原因分析和解决方法,感兴趣的同学参考下. 一般来说,php对json字符串解码使用json_ ...
- Linux 之 FTP服务器搭建
FTP服务器搭建 参考教程:[千峰教育] 1.关闭防火墙: service iptables stop 2.关闭Selinux setenforce 0 3.安装所需要依赖及编译工具 yum inst ...
- serializeObject 的应用
function sendForm() { var invOrderModelWrapper = {}; // 头 var objHeader = $('#invOrderForm').seriali ...
- CSS3自定义滚动条
webkit支持拥有overflow属性的区域,列表框,下拉菜单,textarea的滚动条自定义样式,不过由于用到了CSS3的属性,兼容性不好 看下滚动条demo:demo1(纯CSS3版) 滚动条的 ...
- dedecms--二次开发文章内容页未登录禁止访问和同一个帐号只允许一个ip登录
最近在用dedecms二次开发会员功能,领导要求,会员未登录不允许访问文章内容页,和同一个账号只允许一个ip登录,我是将这两个在一起判断的,判断session存不存在,不存在的情况下就是未登录,这时候 ...
- html5(拖拽3)
<!DOCTYPE html"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> ...