文档章节

anjularjs弹出model(模态框)

进步的蜗牛
 进步的蜗牛
发布于 2015/08/12 10:08
字数 671
阅读 16134
收藏 3

$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),这些方法很容易关闭窗口并且不需要额外的控制器

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


本文转载自:http://blog.csdn.net/violet_day/article/details/17170585

上一篇: angularjs 日期那些
下一篇: 超出点点点
进步的蜗牛
粉丝 5
博文 46
码字总数 33241
作品 0
杭州
私信 提问
Bootstrap响应式前端框架笔记十六——模态框交互

Bootstrap响应式前端框架笔记十六——模态框交互 模态框也可以称为弹出窗,其作用是当用户点击某个功能按钮后,在网页上弹出一个内容窗口。在Bootstrap中,创建模态框十分简单。首先模态框组...

珲少
2016/12/26
186
0
bootstrap模态弹出框

模态弹出框(Modals) 这一小节我们先来讲解一个“模态弹出框”,插件的源文件:modal.js。 右侧代码编辑器(30行)就是单独引入 bootstrap 中发布出的“modal.js”文件。 样式代码: ☑ LE...

老胡不胖
2015/11/23
2.1K
0
bootstrap 模态框 多次请求问题

现在需要做一个功能 使用的是 bootstrap 模态框 弹出方式是使用的 js 请求后台 返回页面路径 然后 弹出模态框 并且在关闭模态框的时候 删除了模态框的数据 现在的问题是,第一次弹出模态框,...

summerpunch
2018/08/10
948
1
bootstrap datepicker控制日期选择

页面点击按钮弹出模态框如下图所示: 第一次选择日期,开始日期、结束日期选择如图所示;选择完后直接关闭模态框,再次点击按钮弹出模态框,点击开始日期输入框弹出日期面板会高亮显示上次选...

eason_1314
2018/11/21
486
1
mooshroom/modal

modal.js 模态框组件 基于avalon的组件,当前兼容性:chrome,firefox,ie7 ie9 ie10 ie11 功能介绍: modal.js是一个基于avalon的弹出框组件,特点是他会在点击触发按钮的位置开始弹出。动画基...

mooshroom
2015/04/10
0
0

没有更多内容

加载失败,请刷新页面

加载更多

x002-语言元素

变量命令规则 硬性规则: 变量名由字母(广义的Unicode字符,不包括特殊字符)、数字和下划线构成,数字不能开头。 大小写敏感(大写的a和小写的A是两个不同的变量)。 不要跟关键字(有特殊...

伟大源于勇敢的开始
今天
4
0
nginx反向代理配置

nginx配置文件位置/usr/local/nginx/conf/nginx.conf 配置文件修改: # cd /usr/local/nginx/conf # vim nginx.conf server {listen 80;server_name localhost;#charset k......

行者终成事
今天
5
0
OSChina 周日乱弹 —— 这是假的,和我之前的不一样

Osc乱弹歌单(2019)请戳(这里) 【今日歌曲】 小小编辑推荐:《男孩》-梁博 / 陶孟童 / 肖和东 / 高誉容 《男孩》-梁博 / 陶孟童 / 肖和东 / 高誉容 手机党少年们想听歌,请使劲儿戳(这里...

小小编辑
今天
15
1
Rust学习笔记一 数据类型

写在前面 我也不是什么特别厉害的大牛,学历也很低,只是对一些新语言比较感兴趣,接触过的语言不算多也不算少,大部分也都浅尝辄止,所以理解上可能会有一些偏差。 自学了Java、Kotlin、Python、...

MusiCodeXY
今天
5
0
Java 脚本引擎入门

Java Script Engine Java 脚本引擎可以将脚本嵌入Java代码中,可以自定义和扩展Java应用程序,自JDK1.6被引入,基于Rhino引擎,JDK1.8后使用Nashorn引擎,支持ECMAScript 5,但后期还可能会换...

阿提说说
今天
6
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部