AngularJS creates a command instance code for uploading photos

angularJS has developed very well in recent years, and is undoubtedly a relatively awesome and mature framework on the market. It can be said to be the king in single-page front-end applications. Two-way binding saves a lot of front-end code, and the control of the controller in terms of its role is also quite tiring. Today we are going to talk about another relatively awesome function, which is the directive of angularJS. Friends who have never heard of angularJS instructions before, please take a trip to your own. Any article is searched for more details than I said. This time, I use an uploaded instruction from the image I wrote myself as a case to explain the instructions in the actual operation process in detail.

Previously, our front-end attachment upload was jqueryFileUpload. Every time we use it, we must draw the style on the page, and then initialize the upload component in the controller. When the upload is successful or failed, we must do the corresponding processing. In this way, we must write code to process each time we write an attachment upload. This is very repetitive, so we want to use the angularJS command to remove the repetitive work. The specific code is as follows:

.directive('imageUpload',['Constants',function(Constants){
return {
  restrict: 'E',
  scope: {
    scopeModel:'=',
    title:'@'
  },
  template : '<fieldset>'
      +'<legend>{{title}}<span class="fileinput-button"><span>Re-upload</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 = ;
        if(){
          =;
          scope.$apply();
        }
      }
    });
    =function(key){
      if(undefined== || null== || ===''){
        return $.ctx+'/images/';
      }
      if(('http://')>-1){
        return ;
      }
      return $.ctx+'/file/getFile?fileKey='+;
    }
  }
};
}]);

After the instruction is completed, you only need to write a line of code on the front-end page to complete the loading of the photo (if you modify the page, you need to load the original photo) and upload functions. The scopeModel is used for two-way binding. When calling, the model in the controller can be passed in the two-way binding between the instruction and the controller. The template in the code is an element template, which can be replaced by itself according to the specific style (I use bootstrap), and use it as follows:

<image-upload scope-model="imagePath" title="Photo upload"></image-upload>

Summarize

The above is the code of AngularJS to create an instruction example for uploading photos by the editor. I hope it will be helpful to everyone. If you have any questions, please leave me a message and the editor will reply to everyone in time. Thank you very much for your support for my website!