AngularJS创建一个上传照片的指令实例代码


Posted in Javascript onFebruary 24, 2018

angularJS在近几年发展火热,也无疑是目前市面上来说比较牛逼且成熟的框架,在单页面前端应用当中应该可以说是王者,双向绑定省去了大量的前端代码,控制器在其作用于方面的控制也是相当腻害,今天我们要说的是另外一个比较牛逼的功能,就是angularJS的指令directive,之前没听说过angularJS指令的朋友请自行度娘,随便搜一条文章都比我说的详细,这次用一个我自己写的图片上传的指令来做为案例,详细说明一下实际操作过程中的指令。

之前我们前端的附件上传用的是jqueryFileUpload,每次使用都要在页面把样式画好,然后再控制器中初始化upload组件,上传成功或失败时候还要做相应的处理,这样每次写一个附件上传都要写代码去处理,这样很重复劳动,所以就想利用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;
    }
  }
};
}]);

指令完成之后在前端页面上只需要写一行代码就可以完成照片的加载(如果是修改页面需要加载出原照片)和上传功能,其中scopeModel是用来双向绑定的,在调用的时候把controller中的model传递进去之后可以实现指令和controller之间的双向绑定,代码中的template为element模板,可以根据具体的样式自己更换(我用的是bootstrap),使用如下:

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

总结

以上所述是小编给大家介绍的AngularJS创建一个上传照片的指令实例代码,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
js中的window.open返回object的错误的解决方法
Aug 15 Javascript
JQuery UI的拖拽功能实现方法小结
Mar 14 Javascript
js 控制页面跳转的5种方法
Sep 09 Javascript
js仿苹果iwatch外观的计时器代码分享
Aug 26 Javascript
JavaScript实现Java中Map容器的方法
Oct 09 Javascript
Vue AST源码解析第一篇
Jul 19 Javascript
vue项目中使用Svg的方法
Oct 24 Javascript
VUE简单的定时器实时刷新的实现方法
Jan 20 Javascript
Node.js 实现简单的无侵入式缓存框架的方法
Jul 21 Javascript
JavaScript使用百度ECharts插件绘制饼图操作示例
Nov 26 Javascript
Js利用正则表达式去除字符串的中括号
Nov 23 Javascript
微信小程序视频弹幕发送功能的实现
Dec 28 Javascript
javaScript动态添加Li元素的实例
Feb 24 #Javascript
jquery动态添加带有样式的HTML标签元素方法
Feb 24 #jQuery
node.js中fs文件系统目录操作与文件信息操作
Feb 24 #Javascript
jQuery动态添加li标签并添加属性和绑定事件方法
Feb 24 #jQuery
使用puppeteer破解极验的滑动验证码
Feb 24 #Javascript
Vue的elementUI实现自定义主题方法
Feb 23 #Javascript
elementui的默认样式修改方法
Feb 23 #Javascript
You might like
php5.2以下版本无json_decode函数的解决方法
2014/05/25 PHP
在Laravel的Model层做数据缓存的实现
2019/09/26 PHP
解决PHP curl或file_get_contents下载图片损坏或无法打开的问题
2019/10/11 PHP
发两个小东西,ASP/PHP 学习工具。 用JavaScript写的
2007/04/12 Javascript
js类中的公有变量和私有变量
2008/07/24 Javascript
jQuery UI Datepicker length为空或不是对象错误的解决方法
2010/12/19 Javascript
JS中for循序中延迟加载动态效果的具体实现
2013/08/18 Javascript
两种方法实现在HTML页面加载完毕后运行某个js
2014/06/16 Javascript
JavaScript 封装一个tab效果源码分享
2015/09/15 Javascript
jquery表单插件Autotab使用方法详解
2016/06/24 Javascript
基于js实现二级下拉联动
2016/12/17 Javascript
JS中正则表达式全局匹配模式 /g用法详解
2017/04/01 Javascript
vue中的非父子间的通讯问题简单的实例代码
2017/07/19 Javascript
Vue组件中slot的用法
2018/01/30 Javascript
JS限制输入框输入的实现代码
2018/07/02 Javascript
vue+axios实现文件下载及vue中使用axios的实例
2018/09/21 Javascript
微信小程序使用map组件实现检索(定位位置)周边的POI功能示例
2019/01/23 Javascript
微信小程序云开发之使用云数据库
2019/05/17 Javascript
使用简单工厂模式来进行Python的设计模式编程
2016/03/01 Python
Linux-ubuntu16.04 Python3.5配置OpenCV3.2的方法
2018/04/02 Python
详解Django+Uwsgi+Nginx的生产环境部署
2018/06/25 Python
Laravel+Dingo/Api 自定义响应的实现
2019/02/17 Python
Python OpenCV实现鼠标画框效果
2020/08/19 Python
Python3 Tensorlfow:增加或者减小矩阵维度的实现
2020/05/22 Python
python计算auc的方法
2020/09/09 Python
HTML5+JS实现俄罗斯方块原理及具体步骤
2013/11/29 HTML / CSS
SKECHERS斯凯奇中国官网:来自美国的运动休闲品牌
2018/11/14 全球购物
英格兰足协官方商店:England Store
2019/07/12 全球购物
纠风工作实施方案
2014/03/15 职场文书
三八妇女节演讲稿
2014/05/27 职场文书
小学生感恩父母演讲稿
2014/08/28 职场文书
教书育人演讲稿
2014/09/11 职场文书
2014年反洗钱工作总结
2014/11/22 职场文书
学校运动会加油词
2015/07/18 职场文书
市语委办2016年第十九届“推普周”活动总结
2016/04/05 职场文书
导游词之蓬莱长岛
2019/12/17 职场文书