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 相关文章推荐
jQuery 树形结构的选择器
Feb 15 Javascript
web网页按比例显示图片实现原理及js代码
Aug 09 Javascript
IE6-IE9中tbody的innerHTML不能赋值的解决方法
Jun 05 Javascript
jquery中radio checked问题
Mar 16 Javascript
jquery实现图片列表鼠标移入微动
Dec 01 Javascript
详解JavaScript中数组的reduce方法
Dec 02 Javascript
Node.JS利用PhantomJs抓取网页入门教程
May 19 Javascript
微信小程序实现点击按钮修改字体颜色功能【附demo源码下载】
Dec 05 Javascript
原生js实现form表单序列化的方法
Aug 02 Javascript
Angular中的ng-template及angular 使用ngTemplateOutlet 指令的方法
Aug 08 Javascript
koa+jwt实现token验证与刷新功能
May 30 Javascript
详解JavaScript作用域 闭包
Jul 29 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
PHP生成HTML静态页面实例代码
2008/08/31 PHP
解决文件名解压后乱码的问题 将文件名进行转码的代码
2012/01/10 PHP
PHP中数组定义的几种方法
2013/09/01 PHP
smarty自定义函数htmlcheckboxes用法实例
2015/01/22 PHP
smarty中常用方法实例总结
2015/08/07 PHP
分享php多功能图片处理类
2016/05/15 PHP
Thinkphp5框架实现图片、音频和视频文件的上传功能详解
2019/08/27 PHP
JS调用CS里的带参方法实例
2013/08/01 Javascript
JS弹出对话框实现方法(三种方式)
2015/12/18 Javascript
基于JavaScript实现飘落星星特效
2017/08/10 Javascript
AngularJS实现动态切换样式的方法分析
2018/06/26 Javascript
Vue.js中的高级面试题及答案
2020/01/13 Javascript
小程序自定义导航栏兼容适配所有机型(附完整案例)
2020/04/26 Javascript
[02:09]EHOME夺得首届辉夜杯冠军—现场颁奖仪式
2015/12/28 DOTA
Python下Fabric的简单部署方法
2015/07/14 Python
详解Python多线程Selenium跨浏览器测试
2017/04/01 Python
python traceback捕获并打印异常的方法
2018/08/31 Python
对pycharm 修改程序运行所需内存详解
2018/12/03 Python
python读取各种文件数据方法解析
2018/12/29 Python
实例详解Python模块decimal
2019/06/26 Python
Python求离散序列导数的示例
2019/07/10 Python
python中的插入排序的简单用法
2021/01/19 Python
一款CSS3实现多功能下拉菜单(带分享按)的教程
2014/11/05 HTML / CSS
美国领先的奢侈手表在线零售商:WatchMaxx
2017/12/17 全球购物
Desigual英国官网:在线购买原创服装
2018/03/09 全球购物
团员的自我评价
2013/12/01 职场文书
老师对学生的评语
2014/04/18 职场文书
乡镇党员干部群众路线对照检查材料思想汇报
2014/09/28 职场文书
支行行长竞聘报告
2014/11/06 职场文书
2015年党风廉政承诺书
2015/01/22 职场文书
4S店收银员岗位职责
2015/04/07 职场文书
烛光里的微笑观后感
2015/06/17 职场文书
2016年学校招生广告语
2016/01/28 职场文书
Java Shutdown Hook场景使用及源码分析
2021/06/15 Java/Android
Flutter Navigator 实现路由传递参数
2022/04/22 Java/Android
利用Java连接Hadoop进行编程
2022/06/28 Java/Android