最近發(fā)現(xiàn)網(wǎng)上對Angular的Modal講解都比較籠統(tǒng)啊犬,所以參考官方文檔進行一下翻譯撵渡、整理忱辅,官方文檔見:
$uibModal
是一個用來創(chuàng)建模態(tài)框的service,模態(tài)框的創(chuàng)建步驟如下:
- 創(chuàng)建模板(create a template)
- 為它聲明一個Controller
$uibModal
只有一個方法:open(options)
,所有的配置都通過options傳給它
options相關(guān)參數(shù)如下:
參數(shù) | 類型 | 默認值 | 含義 |
---|---|---|---|
animation | boolean | true | 顯示模態(tài)框是否帶動畫效果 |
appendTo | angular.element | body | 添加到什么元素中 |
ariaDescribedBy | string | 指定模態(tài)框的內(nèi)容的編號挥等,如div的id | |
ariaLabelledBy | string | 指定模態(tài)框的標題的編號蝶念,如div的id | |
backdrop | boolean [豎線] string | true | 彈出模態(tài)框時抛腕,背景是否置灰,除了true/false外媒殉,還可以指定為'static'担敌,即點擊背景不能關(guān)閉模態(tài)框(默認是可以的),示例:backdrop: false [豎線] 'static'
|
backdropClass | string | 為模態(tài)框的backdrop添加額外的css效果 | |
bindToController | boolean | false | 當設(shè)置了controllerAs屬性且設(shè)置bindToController為true時,會自動為controller注入$scope |
component | string | 指定通過某個組件渲染廷蓉,如果使用一個自定義組件(directive)全封,組件必須指定restrict:'E' 且指定了template和templateUrl兩個屬性,支持如下的綁定:close 關(guān)閉模態(tài)框的方法,結(jié)果格式為{$value: myResult} 桃犬; dismiss 隱藏模態(tài)框刹悴,結(jié)果格式為: {$value: myRejectedResult} ; modalInstance 模態(tài)框的實例,與 $uibModalInstance 等同 疫萤,當使用controller 屬性時颂跨,可向其注入 |
|
controller | funcation[豎線]string[豎線]array | 為模態(tài)框指定一個Controller敢伸,既可以使用controller的名字扯饶,也可以直接指定處理方法,還可以通過array指定依賴的注入池颈,controller內(nèi)尾序,可通過注入的$uibModalInstance 訪問模態(tài)框的內(nèi)容 |
|
controllerAs | string | 一個可選的controller語法,使用時需要指定controller 屬性 |
|
keyboard | boolean | true | 按ESC按鈕時躯砰,是否關(guān)閉模態(tài)框 |
openedClass | string | 當模態(tài)框打開時每币,動態(tài)添加給body的樣式 | |
resolve | Object | 用于傳值 | |
scope | $scope | 父級的 scope實例 | |
size | string | 模態(tài)框的大小, sm琢歇、lg或不填 | |
template | string | 模態(tài)框的模板 | |
templateUrl | string | 模態(tài)框的模板鏈接兰怠,與template必須選擇一個 | |
windowClass | string | 為窗口添加額外的樣式 | |
windowTemplateUrl | string | uib/template/modal/window.html | 可通過指定這個屬性重寫窗口的樣式 |
windowTopClass | string | 為最上層的窗口添加額外的樣式 |
可通過 $uibModalProvider.options
對$uibModal
設(shè)置全局屬性
返回值
open方法會返回一個模態(tài)框的實例,帶有下面的屬性
名稱 | 類型 | 含義 |
---|---|---|
close(result) | funcation | 關(guān)閉模態(tài)框李茫,并傳入結(jié)果 |
dismiss(reason) | funcation | 隱藏模態(tài)框揭保,并傳入原因 |
result | promise | 模態(tài)框已關(guān)閉 |
opened | promise | 模態(tài)框已打開,并加載完模板跟值 |
closed | promise | 模態(tài)框已關(guān)閉魄宏,且動畫結(jié)束 |
rendered | promise | 模態(tài)框已渲染 |