大家好捡遍,我是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);