$modal是一个可以迅速创建模态窗口的服务，创建部分页，控制器，并关联他们

$modal仅有一个方法open(options)

  • templateUrl：模态窗口的地址
  • template：用于显示html标签
  • scope：一个作用域为模态的内容使用（事实上，$modal会创建一个当前作用域的子作用域）默认为$rootScope
  • controller：为$modal指定的控制器，初始化$scope，该控制器可用$modalInstance注入
  • resolve：定义一个成员并将他传递给$modal指定的控制器，相当于routes的一个reslove属性，如果需要传递一个objec对象，需要使用angular.copy()
  • backdrop：控制背景，允许的值：true（默认），false（无背景），“static” - 背景是存在的，但点击模态窗口之外时，模态窗口不关闭
  • keyboard：当按下Esc时，模态对话框是否关闭，默认为ture
  • windowClass：指定一个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的更多相关文章

  1. angular 实现modal windows效果（即模态窗口，半透明的遮罩层），以及bootstrap(css,components,js)的初步学习

    废话不说,直接上代码.可直接看效果,对着分析..今天算是bootstrap 入门了,开心.. 突然居然很多事情就是那样,不要太多的畏惧,迈出第一步其实就成功了一半了. <html ng-app= ...

  2. bootstrap插件学习-bootstrap.modal.js

    bootstrap插件学习-bootstrap.modal.js 先从bootstrap.modal.js的结构看起. function($){ var Modal = function(){} // ...

  3. angular 实现 echarts 拖动区域进行放大 方法

    实现逻辑: 1.通过鼠标摁下事件  和弹出事件  获取x轴的index  之后去x轴的list中去获取两个坐标点 2.之后将这两个数据作为参数  传到后台更新数据 3.记录下来这两个坐标点 放到lis ...

  4. AngularJS进阶(六)AngularJS+BootStrap实现弹出对话框

    AngularJS+BootStrap实现弹出对话框 参考资料: http://angular-ui.github.io/bootstrap/#/modal https://www.zybuluo.c ...

  5. web在线调试

    xx <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta h ...

  6. bootstrap-modal 学习笔记 源码分析

    Bootstrap是Twitter推出的一个开源的用于前端开发的工具包,怎么用直接官网 http://twitter.github.io/bootstrap/ 我博客的定位就是把这些年看过的源码给慢慢 ...

  7. Bootstrap v4.0.0-alpha.5 发布，大量更新

    Bootstrap v4.0.0-alpha.5 发布了,Bootstrap是快速开发Web应用程序的前端工具包.它是一个CSS和HTML的集合,它使用了最新的浏览器技术,给你的Web开发提供了时尚的 ...

  8. AngularJS之ng-options的best practise

    废话不多说,直接上代码. function MySelectCtrl($scope) { $scope.Model = [ { id: 10002, MainCategory: '男', Produc ...

  9. Thymeleaf前后端传值 页面取值与js取值

    参考: Thymeleaf前后端传值 页面取值与js取值 Thymeleaf 与 Javascript Thymeleaf教程 (十二) 标签内,js中使用表达式 目的: 后端通过Model传值到前端 ...

随机推荐

  1. java面试题之osi七层网络模型，五层网络模型，每层分别有哪些协议（阿里面试题）

    OSI七层网络模型 TCP/IP五层网络模型 对应网络协议 应用层 应用层 HTTP.TFTP.FTP.NFS.WAIS.SMTP 表示层 应用层 Telnet.Rlogin.SNMP.Gopher ...

  2. java追加文本到文件末尾

    public class Test { public static void main(String[] args) { method1("F:\\test.txt" , &quo ...

  3. hdu 5971 Wrestling Match 二分图染色

    题目链接 题意 \(n\)人进行\(m\)场比赛,给定\(m\)场比赛的双方编号:再给定已知的为\(good\ player\)的\(x\)个人的编号,已知的为\(bad\ player\)的\(y\ ...

  4. select与stdio混合使用的不良后果

    参考以下链接自己补充实验:http://www.cppblog.com/mysileng/archive/2013/01/15/197284.aspx?opt=admin int main(int a ...

  5. HTML-loading动画1

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  6. 初识mysql语句

    操作文件夹(库) 增 create database db1 charset utf8; 查 # 查看当前创建的数据库 show create database db1; # 查看所有的数据库 sho ...

  7. R语言实战读书笔记(六)基本图形

    #安装vcd包,数据集在vcd包中 library(vcd) counts <- table(Arthritis$Improved)counts # 垂直barplot(counts, main ...

  8. 咦？Oracle归档文件存哪了？

    实验环境:RHEL 5.4 + Oracle 11.2.0.3 现象:日志切换后没找到归档日志目录. 1.查看归档日志路径 2.日志切换后并未找到归档目录 3.创建归档目录后再次观察 引申知识 1.查 ...

  9. Chelly的串串专题

    CF149E 题意:给出一个长度为n的文本串和m个模式串,求有多少个模式串可以拆成两半,使得这两半按顺序匹配(n<=2e5,m<=100) 最暴力的想法就是对于每个询问串,全部和原串做一遍 ...

  10. 如何轻松的把图片导入execl表格中

    在项目中有时候会遇到往数据库中导数据的时候,往往需要把图片也一起导入execl表格中,那怎么才能把图片一块导入至execl中呢?那么今天我们就来看看怎么实现吧! 如何实现?今天我们就来用jxl和poi ...