JS中uibModal服务
该$uibModal服务只有一个方法:open(options)。
$ uibModal的打开函数
选项参数
animation (类型:boolean,默认值:true) -设置为false来禁用新模式/背景动画。不会切换已显示的模态/背景幕的动画。
appendTo (类型:angular.element,默认值:body:举例:$document.find(‘aside’).eq(0)) -追加模式,以一个特定的元素。
ariaDescribedBy (类型:string,my-modal-description) - 设置aria-describedby模态的属性。该值应该是一个id(没有前导#)指向描述您的模态的元素。通常,这将是您的模态上的文本,但不包括用户将与之交互,如按钮或表单的东西。省略此选项不会影响目击用户,但会削弱您的辅助功能支持。
ariaLabelledBy (类型:string,my-modal-title) - 设置aria-labelledby模态的属性。该值应该是一个id(不带前导#)指向标记您的模态的元素。通常,这将是标题元素。省略此选项不会影响目击用户,但会削弱您的辅助功能支持。
backdrop (类型:boolean|string,默认值:true) -控制的背景下存在。允许值:(true默认),false(无背景),’static’(通过点击背景禁用模态关闭)。
backdropClass (类型:string) -附加CSS类(ES)被添加到一个模态的背景模板。
bindToController (类型:boolean,默认值:false) -当使用controllerAs和设置true,这将绑定$作用域属性到控制器。
component (类型:string实施例:myComponent) -一个字符串参考到与角的编译器注册要呈现的组件。如果使用指令,指令必须具有restrict: ‘E’和template或templateUrl设置。
它支持这些绑定:
close - 一种可用于关闭模态,传递结果的方法。结果必须以以下格式传递:{$value: myResult}
dismiss - 一种可以用来消除模态,传递结果的方法。结果必须以以下格式传递:{$value: myRejectedResult}
modalInstance - 模态实例。这是$uibModalInstance使用时发现的相同注射器controller。
resolve - 模态分辨值的对象。有关详细信息,请参阅UI路由器解析。
controller (类型:function|string|array,例如:MyModalController) -用于模态例如控制器,无论是控制器的名字作为一个字符串,或一个内嵌控制器功能,可选包在数组符号依赖注入。允许控制器 - 作为语法。有一个特殊的$uibModalInstance注入来访问模态实例。
controllerAs (类型:string实施例:ctrl) -向控制器为语法的替代。还需要提供controller选项。
keyboard- (类型:boolean,默认值:true) -表示对话框是否应该通过按ESC键可关闭的。
openedClass (类型:string,默认值:modal-open) -类添加到body模态打开时元素。
resolve (类型:Object) -会员将得到解决,并传递给控制器当地人; 它相当于resolve路由器中的属性。
scope (类型:rootScope。
size (类型string:,例如lg:) -可选后缀的模态窗口类。使用附加到值modal-类,即值sm给出modal-sm。
template (类型:string) -代表模式的内容联模板。
templateUrl (类型:string) -为模板代表模式的内容的路径。你需要一个template或templateUrl。
windowClass (类型:string) -附加CSS类(ES)被添加到一个模式窗口模板。
windowTemplateUrl (类型:string,默认值:uib/template/modal/window.html) -为模板覆盖模态窗口模板的路径。
windowTopClass (类型:string) - CSS类(ES)被添加到顶部模式窗口。
可以为uibModalProvider.options。
返回
该open方法返回一个模态实例,一个具有以下属性的对象:
close(result) (类型:function) -可用于关闭模式,传递的结果。
dismiss(reason) (类型:function) -可用于关闭一个模式,路过一个原因。
result (类型:promise) -当一个模式被关闭,当一个模式被驳回驳回得到解决。
opened (类型promise:) -已解决时,一个模式获取打开后内容下载的模板,并解决所有的变量。
closed (类型:promise) -当一个模式被关闭被解决,动画完成。
rendered (类型promise:) -已解决时,一个模式呈现。
与模态的内容相关联的范围增加了:
$close(result) (类型:function) -可用于关闭一个模式,传递的结果的方法。
$dismiss(reason) (类型:function) -可以用于关闭一个模式,传递一个原因的方法。
这些方法使得能够容易地关闭模态窗口,而不需要创建专用控制器。
此外,在使用bindToController时,您可以$onInit在控制器中定义一个在初始化时触发的方法。
事件已触发:
scope通过意外的机制被破坏,例如它在模态选项中传递,并且发生 state转换,则触发此事件。模态也将被解雇。
modal.closing - 这个事件在模态关闭之前广播到模态范围。如果监听器对事件调用preventDefault(),那么模态将保持打开。此外,如果事件被执行,dismiss方法返回true。此事件还包括结果/原因的参数和指示模态是关闭(true)还是关闭的布尔值。
UI路由器解析
如果想使用UI路由器的 pre-1.0解析机制来获得模态解析,可以resolve’)在应用程序的配置阶段调用。还可以提供自定义解析器,只要签名符合UI路由器的$ resolve。
当使用控制器打开模态时,$resolve对象将在解析对象的已解析值的模板上显示。如果使用组件选项,请参阅模态文档的组件部分中有关如何访问此对象的详细信息。
JS中uibModal服务相关推荐
- 微信小程序 app.js中onLaunch中方法执行完毕后再执行index首页数据请求
实际开发中遇到在app.js中onlaunch中方法未执行完毕的情况下,先进入首页执行index方法的问题.如果在onlaunch中写了自动登录的方法,会存在首页加载时显示未登录的情况(此时onlau ...
- Day 27: Restify —— 在Node.js中构建正确的REST Web服务
今天决定学一个叫做restify的Node.js模块.restify模块使得在Node.js中写正确的REST API变得容易了很多,而且它还提供了即装即用的支持,如版本控制.错误处理.CORS和内容 ...
- js ws 状态_node.js中ws模块创建服务端和客户端,网页WebSocket客户端
首先下载websocket模块,命令行输入 npm install ws 1.node.js中ws模块创建服务端 // 加载node上websocket模块 ws; var ws = require( ...
- node.js中net网络模块TCP服务端与客户端的使用
node.js中net模块为我们提供了TCP服务器和客户端通信的各种接口. 一.创建服务器并监听端口 const net = require('net');//创建一个tcp服务 //参数一表示创建服 ...
- node.js中ws模块创建服务端和客户端,网页WebSocket客户端
首先下载websocket模块,命令行输入 npm install ws 1.node.js中ws模块创建服务端 // 加载node上websocket模块 ws; var ws = require( ...
- node/js 漏洞_6个可用于检查Node.js中漏洞的工具
node/js 漏洞 Vulnerabilities can exist in all products. The larger your software grows, the greater th ...
- thymeleaf加载不了js引用_web前端教程之js中的模块化一
web前端教程之js中的模块化一:我们知道最常见的模块化方案有CommonJS.AMD.CMD.ES6,AMD规范一般用于浏览器,异步的,因为模块加载是异步的,js解释是同步的,所以有时候导致依赖还没 ...
- 修改js文件需要重启服务器,关于Node.js中频繁修改代码重启服务器的问题
我们可以使用一个第三方命名行工具,nodemon 来帮我们解决频繁修改代码重启服务器问题. nodemon 是一个基于 Node.jsNode.js 开发的第三方命令行工具,我们使用的时候需要独立安装 ...
- js 拉勾网效果_Node.js 中实践基于 Redis 的分布式锁实现
在一些分布式环境下.多线程并发编程中,如果对同一资源进行读写操作,避免不了的一个就是资源竞争问题,通过引入分布式锁这一概念,可以解决数据一致性问题. 作者简介:五月君,Nodejs Developer ...
- 聊一聊js中的null、undefined与NaN
零.寒暄 翻翻自己的博客,上一篇竟然是六月26号的,说好的更新呢?回顾刚刚过去的这个七月,整天都是公司的入职培训加上自己的小论文,每天奋战到凌晨1点多,这是要挂的节奏啊!但是不论怎么说,自己的时间管理 ...
最新文章
- Linux必学的网络操作命令
- 布道微服务_05RPC远程服务调用的实现
- vscode怎么安装python包_vscode如何安装python
- 【原创】利用腾讯和百度的AI接口识别验证码
- html标签非成对,深入document.write()与HTML4.01的非成对标签的详解
- AutoMapper搬运工之初探AutoMapper
- 用极域课堂管理系统软件批量格式化D盘
- Sqlmap使用教程【超全】
- 给非天才准备的 GRE 单词背诵方案
- 苹果App Store商店中国区如何改为美国区
- 高斯法求解线性方程组
- Dubbo调优 -- 超时TimeOut
- 高等数学费马定理的证明
- 七牛云和Github如何使用PicGo设置免费图床
- JavaScript实现动态时钟显示
- MathType 如何安装成功以及如何导入word
- aspose将word转换为pdf[aspose.word.java 18.11]
- 开放接口/RESTful/Api服务的设计和安全方案详解
- 如何添加新行到表格的最上面(困扰很久的一个问题)(转载)
- 当电脑电池只充到50%就不充电了
热门文章
- CorelDRAW 里面如何将文字调整成半透明的颜色
- (最完美)红米Note 5A的usb调试模式在哪里打开的步骤
- 虚拟主机服务需要备案吗?推荐使用哪种进行建站?
- Android 11.0 12.0默认开启开发者模式和开启usb调试模式
- android 手机数据查看及 samsung galaxy s10 开发者模式
- 由中国银联主导和推行的“盒子支付模式”正式推出多平台应用
- 打卡第十八天--用户体验设计师总结
- App自动绑定的五大应用场景
- Graphviz 画图教程
- 分数加减乘除混合运算带答案_给我出50道分数加减乘除四则混合运算题(只需题目不需答案)...