Angular : Modal(ui.bootstrap.modal)的使用

最近發(fā)現(xiàn)網(wǎng)上對Angular的Modal講解都比較籠統(tǒng)啊犬,所以參考官方文檔進行一下翻譯撵渡、整理忱辅,官方文檔見:

Modal(ui.bootstrap.modal)

$uibModal是一個用來創(chuàng)建模態(tài)框的service,模態(tài)框的創(chuàng)建步驟如下:

  1. 創(chuàng)建模板(create a template)
  2. 為它聲明一個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)框已渲染
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末秸侣,一起剝皮案震驚了整個濱河市,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌味榛,老刑警劉巖椭坚,帶你破解...
    沈念sama閱讀 216,372評論 6 498
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異搏色,居然都是意外死亡善茎,警方通過查閱死者的電腦和手機,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 92,368評論 3 392
  • 文/潘曉璐 我一進店門频轿,熙熙樓的掌柜王于貴愁眉苦臉地迎上來巾表,“玉大人,你說我怎么就攤上這事略吨〖遥” “怎么了?”我有些...
    開封第一講書人閱讀 162,415評論 0 353
  • 文/不壞的土叔 我叫張陵翠忠,是天一觀的道長鞠苟。 經(jīng)常有香客問我,道長秽之,這世上最難降的妖魔是什么当娱? 我笑而不...
    開封第一講書人閱讀 58,157評論 1 292
  • 正文 為了忘掉前任,我火速辦了婚禮考榨,結(jié)果婚禮上跨细,老公的妹妹穿的比我還像新娘。我一直安慰自己河质,他們只是感情好冀惭,可當我...
    茶點故事閱讀 67,171評論 6 388
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著掀鹅,像睡著了一般散休。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上乐尊,一...
    開封第一講書人閱讀 51,125評論 1 297
  • 那天戚丸,我揣著相機與錄音,去河邊找鬼扔嵌。 笑死限府,一個胖子當著我的面吹牛,可吹牛的內(nèi)容都是我干的痢缎。 我是一名探鬼主播胁勺,決...
    沈念sama閱讀 40,028評論 3 417
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼牺弄!你這毒婦竟也來了姻几?” 一聲冷哼從身側(cè)響起宜狐,我...
    開封第一講書人閱讀 38,887評論 0 274
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎蛇捌,沒想到半個月后抚恒,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 45,310評論 1 310
  • 正文 獨居荒郊野嶺守林人離奇死亡络拌,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 37,533評論 2 332
  • 正文 我和宋清朗相戀三年俭驮,在試婚紗的時候發(fā)現(xiàn)自己被綠了。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片春贸。...
    茶點故事閱讀 39,690評論 1 348
  • 序言:一個原本活蹦亂跳的男人離奇死亡混萝,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出萍恕,到底是詐尸還是另有隱情逸嘀,我是刑警寧澤,帶...
    沈念sama閱讀 35,411評論 5 343
  • 正文 年R本政府宣布允粤,位于F島的核電站崭倘,受9級特大地震影響,放射性物質(zhì)發(fā)生泄漏类垫。R本人自食惡果不足惜司光,卻給世界環(huán)境...
    茶點故事閱讀 41,004評論 3 325
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望悉患。 院中可真熱鬧残家,春花似錦、人聲如沸售躁。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,659評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽迂求。三九已至碾盐,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間揩局,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 32,812評論 1 268
  • 我被黑心中介騙來泰國打工掀虎, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留凌盯,地道東北人。 一個月前我還...
    沈念sama閱讀 47,693評論 2 368
  • 正文 我出身青樓烹玉,卻偏偏與公主長得像驰怎,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子二打,可洞房花燭夜當晚...
    茶點故事閱讀 44,577評論 2 353

推薦閱讀更多精彩內(nèi)容

  • Android 自定義View的各種姿勢1 Activity的顯示之ViewRootImpl詳解 Activity...
    passiontim閱讀 172,071評論 25 707
  • Spring Cloud為開發(fā)人員提供了快速構(gòu)建分布式系統(tǒng)中一些常見模式的工具(例如配置管理县忌,服務發(fā)現(xiàn),斷路器,智...
    卡卡羅2017閱讀 134,651評論 18 139
  • 前言的前言 唐巧前輩在微信公眾號「iOSDevTips」以及其博客上推送了我的文章后症杏,我的 Github 各項指標...
    VincentHK閱讀 5,362評論 3 44
  • 第一次免費試用領(lǐng)取成功 必須要記錄一下 慶祝一番
    PWong閱讀 194評論 0 0
  • 我的忠實粉絲装获,嚷嚷著你為什么不更新了,是啊厉颤,何止不更新穴豫,還沒有再寫日記了,有時候在簡書上寫逼友,有時候在日記上寫精肃,有時...
    覃格爾閱讀 381評論 2 0