$uibModal 模态窗口服务

来源:互联网 发布:淘宝考试答案50题答案 编辑:程序博客网 时间:2024/06/07 01:50

$uibModal

使用angularJs 的指令库 ui-bootstrap 弹出模态窗口:
导入ui-bootstrap-tpls.js 这个是ui-bootstrap的库,版本 1.1.0 (老版本的注入对象modaluibModal’,和$$uibModalInstance

addLongPage() {    this.$uibModal.open({      windowClass: 'login-container six-contain',      templateUrl: 'app/tpl/scene/pppLongPage.tpl.html',      controller: 'pppNewController as vm'    }).result.then( (test) => {      this.ppp(test)    })  }

需要和模态窗口进行数据交互时,需要为他指定独立的controller(另外的方法是直接在打开窗口的controller属性中指定controller:function (){})。 模态窗口中使用的数据是指定的controller(这里是cooseDeptController)scope中的数据。

uibModal是一种创建模态窗口的服务。创建模态很简单:创建模板和控制器,并在使用时引用它们uibModal。

该$uibModal服务只有一个方法:open(options)。

选项参数

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 (类型: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)被添加到顶部模式窗口。

可以为uibModalvia设置全局默认值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在控制器中定义一个在初始化时触发的方法。