angularJS在近幾年發(fā)展火熱，也無疑是目前市面上來說比較牛逼且成熟的框架，在單頁面前端應用當中應該可以說是王者，雙向綁定省去了大量的前端代碼，控制器在其作用于方面的控制也是相當膩害，今天我們要說的是另外一個比較牛逼的功能，就是angularJS的指令directive，之前沒聽說過angularJS指令的朋友請自行度娘，隨便搜一條文章都比我說的詳細，這次用一個我自己寫的圖片上傳的指令來做為案例，詳細說明一下實際操作過程中的指令。
之前我們前端的附件上傳用的是jqueryFileUpload，每次使用都要在頁面把樣式畫好，然后再控制器中初始化upload組件，上傳成功或失敗時候還要做相應的處理，這樣每次寫一個附件上傳都要寫代碼去處理，這樣很重復勞動，所以就想利用angularJS的指令把重復勞動的環(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)}}" style="display: block;"/>' + '</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; } }};}]);指令完成之后在前端頁面上只需要寫一行代碼就可以完成照片的加載（如果是修改頁面需要加載出原照片）和上傳功能，其中scopeModel是用來雙向綁定的，在調用的時候把controller中的model傳遞進去之后可以實現(xiàn)指令和controller之間的雙向綁定，代碼中的template為element模板，可以根據(jù)具體的樣式自己更換（我用的是bootstrap），使用如下：
<image-upload scope-model="imagePath" title="照片上傳"></image-upload>
總結
以上所述是小編給大家介紹的AngularJS創(chuàng)建一個上傳照片的指令實例代碼，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對武林網網站的支持！
新聞熱點
疑難解答
