AngularJS創建一個上傳照片的指令實例代碼

.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;
 }
 }
};
}]);

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