欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

AngularJS創(chuàng)建一個(gè)上傳照片的指令實(shí)例代碼

 更新時(shí)間:2018年02月24日 09:20:17   投稿:mrr  
這篇文章主要介紹了AngularJS創(chuàng)建一個(gè)上傳照片的指令實(shí)例代碼,需要的朋友可以參考下

angularJS在近幾年發(fā)展火熱,也無(wú)疑是目前市面上來(lái)說(shuō)比較牛逼且成熟的框架,在單頁(yè)面前端應(yīng)用當(dāng)中應(yīng)該可以說(shuō)是王者,雙向綁定省去了大量的前端代碼,控制器在其作用于方面的控制也是相當(dāng)膩害,今天我們要說(shuō)的是另外一個(gè)比較牛逼的功能,就是angularJS的指令directive,之前沒(méi)聽(tīng)說(shuō)過(guò)angularJS指令的朋友請(qǐng)自行度娘,隨便搜一條文章都比我說(shuō)的詳細(xì),這次用一個(gè)我自己寫(xiě)的圖片上傳的指令來(lái)做為案例,詳細(xì)說(shuō)明一下實(shí)際操作過(guò)程中的指令。

之前我們前端的附件上傳用的是jqueryFileUpload,每次使用都要在頁(yè)面把樣式畫(huà)好,然后再控制器中初始化upload組件,上傳成功或失敗時(shí)候還要做相應(yīng)的處理,這樣每次寫(xiě)一個(gè)附件上傳都要寫(xiě)代碼去處理,這樣很重復(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)}}" 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;
    }
  }
};
}]);

指令完成之后在前端頁(yè)面上只需要寫(xiě)一行代碼就可以完成照片的加載(如果是修改頁(yè)面需要加載出原照片)和上傳功能,其中scopeModel是用來(lái)雙向綁定的,在調(diào)用的時(shí)候把controller中的model傳遞進(jìn)去之后可以實(shí)現(xiàn)指令和controller之間的雙向綁定,代碼中的template為element模板,可以根據(jù)具體的樣式自己更換(我用的是bootstrap),使用如下:

<image-upload scope-model="imagePath" title="照片上傳"></image-upload>

總結(jié)

以上所述是小編給大家介紹的AngularJS創(chuàng)建一個(gè)上傳照片的指令實(shí)例代碼,希望對(duì)大家有所幫助,如果大家有任何疑問(wèn)請(qǐng)給我留言,小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持!

相關(guān)文章

最新評(píng)論