在AngularJS中如何建立上傳照片的指令（詳細教學）

這篇文章主要介紹了AngularJS創建一個上傳照片的指令實例代碼,需要的朋友可以參考下

angularJS在近幾年發展火熱，也無疑是目前市面上來說比較牛逼且成熟的框架，在單頁前端應用當中應該可以說是王者，雙向綁定省去了大量的前端代碼，控制器在其作用於方面的控制也是相當膩害，今天我們要說的是另外一個比較牛逼的功能，就是angularJS的指令directive，之前沒聽說過angularJS指令的朋友請自行度娘，隨便搜一條文章都比我說的詳細，這次用一個我自己寫的圖片上傳的指令來做為案例，詳細說明一下實際操作過程中的指令。

之前我們前端的附件上傳用的是jqueryFileUpload，每次使用都要在頁面把樣式畫好，然後再控制器中初始化upload元件，上傳成功或失敗時候還要做相應的處理，這樣每次寫一個附件上傳都要寫程式碼去處理，這樣很重複勞動，所以就想利用angularJS的指令把重複勞動的環節給去掉，具體程式碼如下：

.directive('imageUpload',['Constants',function(Constants){
return {
  restrict: 'E',
  scope: {
    scopeModel:'=',
    title:'@'
  },
  template : &#39;<fieldset>&#39;
      +&#39;<legend>{{title}}<span class="fileinput-button"><span>重新上传</span>&#39;
      +&#39;<input type="file" name="file"></span></legend>&#39;
      + &#39;<span class="profile-picture">&#39;
      + &#39;<img class="img-responsive lazy"  src="/static/imghwm/default1.png"  data-src="{{loadImg(scopeModel)}}"   alt="{{title}}" ng-   style="max-width:90%"/>&#39;
      + &#39;</fieldset>&#39;,
  link : function(scope, element, attrs) {
    $(element).fileupload({
      url: &#39;file/upload&#39;,
      dataType: &#39;json&#39;,
      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===&#39;&#39;){
        return $.ctx+&#39;/images/noImage.jpg&#39;;
      }
      if(scope.scopeModel.indexOf(&#39;http://&#39;)>-1){
        return scope.scopeModel;
      }
      return $.ctx+&#39;/file/getFile?fileKey=&#39;+scope.scopeModel;
    }
  }
};
}]);

指令完成之後在前端頁面上只需要寫一行程式碼就可以完成照片的載入（如果是修改頁面需要載入出原照片）和上傳功能，其中scopeModel是用來雙向綁定的，在呼叫的時候把controller中的model傳遞進去之後可以實現指令和controller之間的雙向綁定，程式碼中的template為element模板，可以根據具體的樣式自己更換（我用的是bootstrap），使用如下：

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

上面是我整理給大家的，希望今後對大家有幫助。

相關文章：

如何使用Vue-Router模式和鉤子（詳細教學）

在angularjs中取得默認選取的單選按鈕的value方法（詳細教學）

在vue中全面解讀cli（詳細教學）

以上是在AngularJS中如何建立上傳照片的指令（詳細教學）的詳細內容。更多資訊請關注PHP中文網其他相關文章！