这篇文章主要介绍了angularjs创建一个上传照片的指令实例代码,需要的朋友可以参考下
angularJS在近几年发展火热，也无疑是目前市面上来说比较牛逼且成熟的框架，在单页面前端应用当中应该可以说是王者，双向绑定省去了大量的前端代码，控制器在其作用于方面的控制也是相当腻害，今天我们要说的是另外一个比较牛逼的功能，就是angularJS的指令directive，之前没听说过angularJS指令的朋友请自行度娘，随便搜一条文章都比我说的详细，这次用一个我自己写的图片上传的指令来做为案例，详细说明一下实际操作过程中的指令。
之前我们前端的附件上传用的是jqueryFileUpload，每次使用都要在页面把样式画好，然后再控制器中初始化upload组件，上传成功或失败时候还要做相应的处理，这样每次写一个附件上传都要写代码去处理，这样很重复劳动，所以就想利用angularJS的指令把重复劳动的环节给去掉，具体代码如下：
.directive('imageUpload',['Constants',function(Constants){
return {
restrict: 'E',
scope: {
scopeModel:'=',
title:'@'
},
template : '',
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传递进去之后可以实现指令和controller之间的双向绑定，代码中的template为element模板，可以根据具体的样式自己更换（我用的是bootstrap），使用如下：
上面是我整理给大家的，希望今后会对大家有帮助。
Android文档-开发者指南-第一部分：入门-中英文对照版 Android提供了丰富的应用程序框架，它允许您在Java语言环境中构建移动设备的创新应用程序和游戏。在左侧导航中列出的文档提供了有关如何使用Android的各种API来构建应用程序的详细信息。第一部分：Introduction(入门) 0、Introduction to Android(引进到Android) 1、Application Fundamentals(应用程序基础) 2、Device Compatibility(设备兼容性) 3、
相关文章：
在angularjs中获取默认选中的单选按钮的value方法（详细教程）
