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传值到前端 ...
随机推荐
- NOJ——1672剪绳子（博弈）
[1672] 剪绳子 时间限制: 500 ms 内存限制: 65535 K 问题描述 已知长度为n的线圈,两人依次截取1~m的长度,n, m为整数,不能取者为输. 输入 输入n, m:( 0 < ...
- TroubleShoot：网站设置找不到术语管理
在SharePoint站点中找不到“术语管理”这个链接功能. 解决方案: Enable-SPFeature -id “73EF14B1-13A9-416b-A9B5-ECECA2B0604C” -Ur ...
- angular关于依赖注入
<html> <head> <title>Angular JS Forms</title> </head> <body> < ...
- 机器学习实战读书笔记(五)Logistic回归
Logistic回归的一般过程 1.收集数据:采用任意方法收集 2.准备数据:由于需要进行距离计算,因此要求数据类型为数值型.另外,结构化数据格式则最佳 3.分析数据:采用任意方法对数据进行分析 4. ...
- 2017 ACM-ICPC 沈阳区域赛记录
出发日 中午坐大巴前往萧山机场. 哇开心又可以坐飞机了 飞机延误了.在候机大厅里十分无聊,先用机场的电脑玩了会小游戏 然后偷偷切了2个水题 (什么编译器IDE都没有,只能记事本了) 飞机上什么东西都没 ...
- Codeforces 375D Tree and Queries（DFS序+莫队+树状数组）
题目链接 Tree and Queries 题目大意 给出一棵树和每个节点的颜色.每次询问$vj, kj$ 你需要回答在以$vj$为根的子树中满足条件的的颜色数目, 条件:具有该颜色的节点数量至少 ...
- jenkins+gitlab发布maven项目
1.简介:什么是Maven Maven是一个项目管理和综合工具.Maven提供给开发人员构建一个完整的生命周期框架; 开发团队可以自动完成该项目的基础设施建设,Maven使用标准的目录结构和默认构建生 ...
- 笔记-迎难而上之Java基础进阶5
Lambda表达式无参数无返回值的练习 //定义一个接口 public interface Cook{ public abstract void makeFood(); } public class ...
- InnoDB: Warning: a long semaphore wait 解决办法
http://blog.csdn.net/wulantian/article/details/37560849
- webstorm 2016 激活破解
2017.2.27更新 选择“license server” 输入:http://idea.imsxm.com/ 2016.2.2 版本的破解方式: 安装以后,打开软件会弹出一个对话框:选择“lice ...