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传值到前端 ...
随机推荐
- NOI2017 [NOI2017]游戏 【2-sat】
题目 题目背景 狂野飙车是小 L 最喜欢的游戏.与其他业余玩家不同的是,小 L 在玩游戏之余,还精于研究游戏的设计,因此他有着与众不同的游戏策略. 题目描述 小 L 计划进行nn 场游戏,每场游戏使用 ...
- Python基础教程总结（一）
引言: 一直都听说Python很强大,以前只是浏览了一些博客,发现有点像数学建模时使用的Matlab,就没有深入去了解了.如今Python使用的地方越来越多,最近又在学习机器学习方面的知识,因此想系统 ...
- 42深入理解C指针之---指针与队列
一.借助第40指针与链表的相关内容,稍微修改即可: 1.定义头文件queue.h代码如下: #include <stdlib.h> #include <stdio.h> #if ...
- 35深入理解C指针之---结构体基础
一.结构体基础 1.定义:结构体大大加强了C的数据聚合能力,可以使得不同类型的数据进行结合 2.特征: 1).结构体可以使得不同类型的数据进行结合 2).结构体可以使用内置的数据类型,包括指针 3). ...
- react-native 判断是不是IPhone X
import { Platform, Dimensions } from 'react-native'; // iPhoneX const X_WIDTH = 375; const X_HEIGHT ...
- html移动端 -- meta-模板 + rem
第一种方式: ps 不用除以2<header> <meta charset="utf-8"> <meta name="viewport&qu ...
- Xamarin.Forms的滚动视图ScrollView
Xamarin.Forms的滚动视图ScrollView 在Xamarin.Forms中,滚动视图ScrollView用来实现长内容的滚动显示.虽然ScrollView的Content属性只能设置 ...
- mysql中TIMESTAMPDIFF简单记录
1. Syntax TIMESTAMPDIFF(unit,begin,end); 根据单位返回时间差,对于传入的begin和end不需要相同的数据结构,可以存在一个为Date一个DateTime 2 ...
- JDBC_完整版
1,新建WEB项目:JDBC 2,导入驱动 将mysql-connector-java-5.0.8-bin.jar包放入web-inf目录下面的lib目录中 3,新建User类,放入entity包中 ...
- Linux内核源码分析--内核启动之zImage自解压过程
参考: http://blog.chinaunix.net/uid-20543672-id-3018233.html Linux内核编译流程分析 linux2.6内核启动分析--李枝果(不看是你的损失 ...