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传值到前端 ...
随机推荐
- 【bzoj4800】[Ceoi2015]Ice Hockey World Championship 折半搜索
题目描述 有n个物品,m块钱,给定每个物品的价格,求买物品的方案数. 输入 第一行两个数n,m代表物品数量及钱数 第二行n个数,代表每个物品的价格 n<=40,m<=10^18 输出 一行 ...
- HDU——1846Brave Game（巴什博弈）
Brave Game Time Limit: 1000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others) Total ...
- [LOJ#522]「LibreOJ β Round #3」绯色 IOI（危机）
[LOJ#522]「LibreOJ β Round #3」绯色 IOI(危机) 试题描述 IOI 的比赛开始了.Jsp 和 Rlc 坐在一个角落,这时他们听到了一个异样的声音 …… 接着他们发现自己收 ...
- 【bzoj2440】[中山市选2011]完全平方数 莫比乌斯反演
Description 小 X 自幼就很喜欢数.但奇怪的是,他十分讨厌完全平方数.他觉得这些数看起来很令人难受.由此,他也讨厌所有是完全平方数的正整数倍的数.然而这丝毫不影响他对其他数的热爱.这天是小 ...
- wireshark推荐书籍
1 wireshark数据包分析实战 有中文版 2 wireshark网络分析 英文版 3 TCP/IP协议栈详解卷一
- 关于sass和less做自适应网页的区别
less 可以这么写 @r: 15rem; body{margin-top:40/@r}; 但是sass这么写会报错 sass应该这么写 $r: 15; body{margin-top:40re ...
- libstdc++.so.6: version `GLIBCXX_3.4.20' not found
libstdc++.so.6: version `GLIBCXX_3.4.20' not found 参考链接: (1)解决/usr/lib/libstdc++.so.6: version `GLIB ...
- LeetCode OJ--Single Number
https://oj.leetcode.com/problems/single-number/ 给一个数列,其中只有一个数不是两两相同的,在O(n)时间内求出来,并且不使用额外空间. 使用异或操作,如 ...
- 2017CCPC 哈尔滨 B
这题没有考虑到m这个东西,所以就没有往二分答案的方向想 二分答案 check的时候,我们找的是大于等于x的数有多少个被加入到那个数组中.如果 >= m说明这个数可能是答案,否则就不是. 用尺取来 ...
- 初识mysql语句
操作文件夹(库) 增 create database db1 charset utf8; 查 # 查看当前创建的数据库 show create database db1; # 查看所有的数据库 sho ...