原文转至 http://blog.csdn.net/violet_day/article/details/17170585

$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>

转载于:https://www.cnblogs.com/wohenxion/p/4478477.html

【转】AngularJs 弹出框 model（模态框）相关推荐

  1. SharePoint 客户端经常弹出Windows验证登录框问题

    场景描述: Site工作人员UserA创建了一个Task,并且Assign给UserB.UserB接到来自Task List的邮件通知.这时UserA发现Assign的人错了,重新修改Task Ite ...

  2. php网页，想弹出对话框， 消息框 简单代码

    php网页,想弹出对话框, 消息框 简单代码 <?php echo "<script language=\"JavaScript\">alert(\&q ...

  3. BootStrap中Model模态框点击除了×号和关闭按钮外的其他区域不消失

    问题描述:在使用Model(模态框)时,在模态框中编辑一些信息,点击黑色区域(就是除了×号和按钮的暗色区域),模态框会消失,而再次打开模态框是,原来编辑的信息还在 解决办法: //在模态框的最外层添加 ...

  4. 批量删除，未勾选数据，点击【批量删除】弹出确认删除提示框

    批量删除,未勾选数据,点击[批量删除]弹出确认删除提示框 给table组件,添加ref="selections" 在分页方法中,添加方法.设置为空

  5. iOS中Mach异常和signal信号介绍，以及当APP崩溃时做线程保活弹出程序异常提示框

    我们经常会遇到APP闪退和崩溃的问题,那么我们应该通过什么变量去监听APP的异常呢?如何在程序崩溃时,保证程序不闪退,并给用户弹出一个提示框呢? 这是本文将要讲述的内容. 先介绍2个概念,Mach异常 ...

  6. upload 上传文件之前判断，先判断再弹出文档选择框

    如果想要点击上传按钮判断某个条件是否符合,再弹出文档选择框的效果, 不需要在Upload标签绑定before-upload事件,而是在上传Button按钮绑定事件 <Upload action= ...

  7. mt6735 Audio framework]音量警告提示框选择OK，重启后再增大音量希望还会弹出音量警告提示框

    [DESCRIPTION] 目前的做法是: 音量警告提示框选择OK,重启后就不会再弹出警告提示框, 除非恢复出厂设置 如果希望重启后再增大音量希望还会弹出音量警告提示框 请参考如下修改: [SOLUT ...

  8. android 弹出框带标题栏,Android微信右上角弹出的对话选择框实现

     Android微信右上角弹出的对话选择框实现 我在之前的文章中曾给出了一个开源的微信UI大体实现方案具体代码实现,参见附录文章1.本文单单挑出一个微信的UI实现点:微信右上角弹出的选择对话框.如 ...

  9. Axure知识点：如何制作弹出效果的搜索框（以泉州师范学院官网为例）

    摘要:微信搜索[三桥君] 使用软件:Axure RP 9软件 说明:实现方式不唯一,这里给出三桥君制作的一种方式. 一.问题 三桥君在制作泉州师范学院官网带有弹出效果的搜索框时,属实让我犯难了.[泉州 ...

  10. html中写模态框,Html 模态框操作

    #modal-overlay { visibility: hidden; position: absolute; /* 使用绝对定位或固定定位 */ left: 0px; top: 0px; widt ...

最新文章

  1. 嵌入式Linux的特点
  2. JavaEE课程目标、个人目标、互联网应用和企业级应用的区别
  3. 渗透测试入门8之端口渗透
  4. Codeforces 1091E New Year and the Acquaintance Estimation Erdős–Gallai定理
  5. （09）FPGA设计流程
  6. 【git】git compare with branch 一样的代码 但是却标识不一样 成块显示 Git 比较 不准确
  7. java jsonobject date_如何将Json Passed Date Value分配给Java Date Object
  8. 算法笔记-----归并排序
  9. 后台 事务SqlTransaction
  10. 数字信号处理之数字混频
  11. 动漫插画培训班有哪些
  12. C语言之#define，#ifdef，typedef，extern，statis，__weak的用法，看懂stm32中的.h和.c文件
  13. Alist+RaiDrive将你的云盘本地化
  14. c语言小程序飞机大战,飞机大战微信小游戏：经典像素飞机大战小程序，点开即玩...
  15. 足球数据采集 php,世上最权威足球数据网站只爱梅西？
  16. 跳入餐饮新消费水池，腾讯、字节、B站能否“如鱼得水”？
  17. go实践二十 web开发--表单唯一token 表单验证 防止xss攻击 上传文件 cookie处理
  18. keras 受限玻尔兹曼机_目前深度学习的模型有哪几种，适用于哪些问题？
  19. linux dc退出命令,Linux dc 命令 command not found dc 命令详解 dc 命令未找到 dc 命令安装 - CommandNotFound ⚡️ 坑否...
  20. Unity帧率的计算和显示

热门文章

  1. oracle 压缩 插入速度,求助大佬：向压缩表插入数据，压缩未生效
  2. 骁龙660是32位还是64位_骁龙660是32位还是64位_都是搭载骁龙660处理器 这三款国产手机如何选...
  3. 中班科学计算机,幼儿园中班科学课件：《照镜子》
  4. python操作mongodb语法_python 操作MongoDB
  5. uva1509(暴力dfs)
  6. python读txt文件 数组-python将txt等文件中的数据读为numpy数组的方法
  7. 20211205 Nussbaum函数实例
  8. vue嵌套数据多层级里面的数据不自动更新渲染dom
  9. Express框架Restful API Ajax 跨域 开启Cookie支持
  10. 《Java编程的逻辑》第三部分 泛型与容器