如何將上傳圖片封裝為指令

大家好捡遍,我是IT修真院成都分院第8期的學員锌订,一枚正直純潔善良的WEB前端程序員。今天給大家分享一下閉包是什么画株,用處如何辆飘。


一、在JS任務5-10中谓传,會用到一個插件蜈项,用來實現(xiàn)圖片上傳功能。包含以下功能

點擊按鈕上傳圖片

圖片能在本地預覽

顯示圖片信息续挟,顯示上傳進度

點擊上傳按鈕上傳到服務器

點擊刪除按鈕紧卒,刪除。

上傳按鈕只能按一次

二诗祸、基礎知識

關于指令跑芳,因為我們是有直接講指令的小課堂的,所以這里就簡單說一下贬媒。

angular指令本質(zhì)上就是AngularJs擴展具有自定義功能的html元素的途徑聋亡。

內(nèi)置指令,打包在AngularJs內(nèi)部的指令际乘,所有內(nèi)部指令的命名空間 都使用ng作為前綴坡倔,所以在寫自定義指令的時候,避免用ng作為指令命名的前綴脖含。

創(chuàng)建指令的方式有四種罪塔,在指令里用 restrict屬性控制:

E:元素

A:屬性

C:css類

M:注釋

向指令中傳遞數(shù)據(jù),用template屬性

directive 在使用隔離 scope 的時候养葵,提供了三種方法同隔離之外的地方交互:

@ 綁定一個局部 scope 屬性到當前 dom 節(jié)點的屬性值征堪。結(jié)果總是一個字符串,因為 dom 屬性是字符串关拒。

= 通過 directive 的 attr 屬性的值在局部 scope 的屬性和父 scope 屬性名之間建立雙向綁定佃蚜。

& 提供一種方式執(zhí)行一個表達式在父 scope 的上下文中。如果沒有指定 attr 名稱着绊,則屬性名稱為相同的本地名稱谐算。(其實說白了,就是可以使用在父scope中定義的函數(shù)归露。)

replace:是否用模板替換當前元素洲脂。

true : 將指令標簽替換成temple中定義的內(nèi)容,頁面上不會再有標簽;

false :則append(追加)在當前元素上剧包,即模板的內(nèi)容包在標簽內(nèi)部恐锦。默認false往果。

3.常見問題:如何實現(xiàn)封裝?

視頻:

問題:

1一铅、指令中l(wèi)ink和controller屬性有什么區(qū)別陕贮?

這兩個都可以獲取到作用域,元素馅闽,屬性等引用飘蚯,也都會執(zhí)行一次。那當我們每次想要擴展個自定義指令時福也,應該用哪個?

控制器可以暴露一個API攀圈,而link可以通過require與其他的指令控制器交互

所以如果要開放出一個API給其他指令用就寫在controller中暴凑,否則寫在link中。簡單來說赘来,優(yōu)先使用link现喳。

2、如何解除上傳圖片大小的限制犬辰?

我是直接判斷input文件大小嗦篱。

3、如何一次性上傳多個圖片幌缝?

使用formdata.append追加圖片灸促。

scope.disUp = true;

var img = angular.element("#"+scope.imgId).get(0).files[0];

var imgForm = new FormData();

imgForm.append("file",img);

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市涵卵,隨后出現(xiàn)的幾起案子浴栽,更是在濱河造成了極大的恐慌,老刑警劉巖轿偎,帶你破解...
    沈念sama閱讀 216,324評論 6 498
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件典鸡,死亡現(xiàn)場離奇詭異,居然都是意外死亡坏晦,警方通過查閱死者的電腦和手機萝玷,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 92,356評論 3 392
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來昆婿,“玉大人球碉,你說我怎么就攤上這事⊥谥睿” “怎么了汁尺?”我有些...
    開封第一講書人閱讀 162,328評論 0 353
  • 文/不壞的土叔 我叫張陵,是天一觀的道長多律。 經(jīng)常有香客問我痴突,道長搂蜓,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 58,147評論 1 292
  • 正文 為了忘掉前任辽装,我火速辦了婚禮帮碰,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘拾积。我一直安慰自己殉挽,他們只是感情好,可當我...
    茶點故事閱讀 67,160評論 6 388
  • 文/花漫 我一把揭開白布拓巧。 她就那樣靜靜地躺著斯碌,像睡著了一般。 火紅的嫁衣襯著肌膚如雪肛度。 梳的紋絲不亂的頭發(fā)上傻唾,一...
    開封第一講書人閱讀 51,115評論 1 296
  • 那天,我揣著相機與錄音承耿,去河邊找鬼冠骄。 笑死,一個胖子當著我的面吹牛加袋,可吹牛的內(nèi)容都是我干的凛辣。 我是一名探鬼主播,決...
    沈念sama閱讀 40,025評論 3 417
  • 文/蒼蘭香墨 我猛地睜開眼职烧,長吁一口氣:“原來是場噩夢啊……” “哼扁誓!你這毒婦竟也來了?” 一聲冷哼從身側(cè)響起阳堕,我...
    開封第一講書人閱讀 38,867評論 0 274
  • 序言:老撾萬榮一對情侶失蹤跋理,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后恬总,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體前普,經(jīng)...
    沈念sama閱讀 45,307評論 1 310
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 37,528評論 2 332
  • 正文 我和宋清朗相戀三年壹堰,在試婚紗的時候發(fā)現(xiàn)自己被綠了拭卿。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 39,688評論 1 348
  • 序言:一個原本活蹦亂跳的男人離奇死亡贱纠,死狀恐怖峻厚,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情谆焊,我是刑警寧澤惠桃,帶...
    沈念sama閱讀 35,409評論 5 343
  • 正文 年R本政府宣布,位于F島的核電站,受9級特大地震影響辜王,放射性物質(zhì)發(fā)生泄漏劈狐。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點故事閱讀 41,001評論 3 325
  • 文/蒙蒙 一呐馆、第九天 我趴在偏房一處隱蔽的房頂上張望肥缔。 院中可真熱鬧,春花似錦汹来、人聲如沸续膳。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,657評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽坟岔。三九已至,卻和暖如春闺阱,著一層夾襖步出監(jiān)牢的瞬間炮车,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 32,811評論 1 268
  • 我被黑心中介騙來泰國打工酣溃, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人纪隙。 一個月前我還...
    沈念sama閱讀 47,685評論 2 368
  • 正文 我出身青樓赊豌,卻偏偏與公主長得像,于是被迫代替她去往敵國和親绵咱。 傳聞我的和親對象是個殘疾皇子碘饼,可洞房花燭夜當晚...
    茶點故事閱讀 44,573評論 2 353

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