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传值到前端 ...
随机推荐
- 【bzoj3744】Gty的妹子序列 分块+树状数组+主席树
题目描述 我早已习惯你不在身边, 人间四月天 寂寞断了弦. 回望身后蓝天, 跟再见说再见…… 某天,蒟蒻Autumn发现了从 Gty的妹子树(bzoj3720) 上掉落下来了许多妹子,他发现 她们排成 ...
- 【Luogu】P2536病毒检测（Trie上DP）
题目链接 这道题我写了个01DP,f[i][j]表示跑到Trie上第i个节点,匹配到字符串第j位行不行 然后重点在*号无限匹配怎么处理 经过一番脑洞我们可以发现*号无限匹配可以拆成两种情况: 1:匹配 ...
- hihoCoder #1157 建造金字塔
这道题我想了一天才想清楚做法.AC 了之后去看别人写的题解,都是三言两语意识流式描述,我并不能读懂.我觉得很自卑,为何人家解这道题如此轻松.不过,我还是决定把我的解法写下来,并且一定要写清楚. 思路 ...
- BZOJ3990 [SDOI2015]排序 【搜索】
题目 小A有一个1-2^N的排列A[1..2^N],他希望将A数组从小到大排序,小A可以执行的操作有N种,每种操作最多可以执行一次,对于所有的i(1<=i<=N),第i中操作为将序列从左到 ...
- POJ2594Treasure Exploration（最小路径覆盖，相交）
Treasure Exploration Have you ever read any book about treasure exploration? Have you ever see any f ...
- [暑假集训--数位dp]cf55D Beautiful numbers
Volodya is an odd boy and his taste is strange as well. It seems to him that a positive integer numb ...
- css的部分应用示例
CSS :层叠样式表,Cascading Style Sheets.CSS不仅可以静态地修饰网页,还可以配合各种脚本语言动态地对网页各元素进行格式化. 1 vertical-align 在图片与文字对 ...
- hdu 1754 线段树（点修改）
I Hate It Time Limit: 9000/3000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others)Total S ...
- Linux System Programming 学习笔记(四) 高级I/O
1. Scatter/Gather I/O a single system call to read or write data between single data stream and mu ...
- Day 16 购物车
#! /usr/bin/env python # -*- coding: utf-8 -*- # __author__ = "DaChao" # Date: 2017/6/7 #! ...