您好,登錄后才能下訂單哦!
這篇文章主要介紹了AngularJS如何創(chuàng)建一個(gè)上傳照片的指令,具有一定借鑒價(jià)值,感興趣的朋友可以參考下,希望大家閱讀完這篇文章之后大有收獲,下面讓小編帶著大家一起了解一下。
angularJS在近幾年發(fā)展火熱,也無疑是目前市面上來說比較牛逼且成熟的框架,在單頁(yè)面前端應(yīng)用當(dāng)中應(yīng)該可以說是王者,雙向綁定省去了大量的前端代碼,控制器在其作用于方面的控制也是相當(dāng)膩害,今天我們要說的是另外一個(gè)比較牛逼的功能,就是angularJS的指令directive,之前沒聽說過angularJS指令的朋友請(qǐng)自行度娘,隨便搜一條文章都比我說的詳細(xì),這次用一個(gè)我自己寫的圖片上傳的指令來做為案例,詳細(xì)說明一下實(shí)際操作過程中的指令。
之前我們前端的附件上傳用的是jqueryFileUpload,每次使用都要在頁(yè)面把樣式畫好,然后再控制器中初始化upload組件,上傳成功或失敗時(shí)候還要做相應(yīng)的處理,這樣每次寫一個(gè)附件上傳都要寫代碼去處理,這樣很重復(fù)勞動(dòng),所以就想利用angularJS的指令把重復(fù)勞動(dòng)的環(huán)節(jié)給去掉,具體代碼如下:
.directive('imageUpload',['Constants',function(Constants){ return { restrict: 'E', scope: { scopeModel:'=', title:'@' }, template : '<fieldset>' +'<legend>{{title}}<span class="fileinput-button"><span>重新上傳</span>' +'<input type="file" name="file"></span></legend>' + '<span class="profile-picture">' + '<img class="img-responsive" alt="{{title}}" ng-src="{{loadImg(scopeModel)}}" />' + '</fieldset>', link : function(scope, element, attrs) { $(element).fileupload({ url: 'file/upload', dataType: 'json', done: function(e, data) { var res = data.result; if(res.success){ scope.scopeModel=res.data.fileKey; scope.$apply(); } } }); scope.loadImg=function(key){ if(undefined==scope.scopeModel || null==scope.scopeModel || scope.scopeModel===''){ return $.ctx+'/images/noImage.jpg'; } if(scope.scopeModel.indexOf('http://')>-1){ return scope.scopeModel; } return $.ctx+'/file/getFile?fileKey='+scope.scopeModel; } } }; }]);
指令完成之后在前端頁(yè)面上只需要寫一行代碼就可以完成照片的加載(如果是修改頁(yè)面需要加載出原照片)和上傳功能,其中scopeModel是用來雙向綁定的,在調(diào)用的時(shí)候把controller中的model傳遞進(jìn)去之后可以實(shí)現(xiàn)指令和controller之間的雙向綁定,代碼中的template為element模板,可以根據(jù)具體的樣式自己更換(我用的是bootstrap),使用如下:
<image-upload scope-model="imagePath" title="照片上傳"></image-upload>
感謝你能夠認(rèn)真閱讀完這篇文章,希望小編分享的“AngularJS如何創(chuàng)建一個(gè)上傳照片的指令”這篇文章對(duì)大家有幫助,同時(shí)也希望大家多多支持億速云,關(guān)注億速云行業(yè)資訊頻道,更多相關(guān)知識(shí)等著你來學(xué)習(xí)!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。