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得到font-size属性值实现代码
Sep 30 Javascript
jquery预览图片实现鼠标放上去显示实际大小
Jan 16 Javascript
JS中三目运算符和if else的区别分析与示例
Nov 21 Javascript
JavaScript通过Date-Mask将日期转换成字符串的方法
Jun 04 Javascript
深入探秘jquery瀑布流的实现
Jan 30 Javascript
JavaScript中eval函数的问题
Jan 31 Javascript
javascript 广告移动特效的实现代码
Jun 25 Javascript
js合并两个数组生成合并后的key:value数组
May 09 Javascript
vue实现路由监听和参数监听
Oct 29 Javascript
JS实现动态无缝轮播
Jan 11 Javascript
Electron整合React使用搭建开发环境的步骤详解
Jun 07 Javascript
vue中移动端调取本地的复制的文本方式
Jul 18 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下读取文本文件的代码
2008/07/02 PHP
thinkPHP中钩子的使用方法实例分析
2017/11/16 PHP
PHP基于openssl实现的非对称加密操作示例
2019/01/11 PHP
php7新特性的理解和比较总结
2019/04/14 PHP
代码生成器 document.write()
2007/04/15 Javascript
JQuery下的Live方法和$.browser方法使用代码
2010/06/02 Javascript
JavaScript浏览器选项卡效果
2010/08/25 Javascript
Jquery右下角抖动、浮动 实例代码(兼容ie6、FF)
2013/08/15 Javascript
javascript实现的平方米、亩、公顷单位换算小程序
2014/08/11 Javascript
jquery输入数字随机抽奖特效的简单实现代码
2016/06/10 Javascript
JavaScript实现拖拽元素对齐到网格(每次移动固定距离)
2016/11/30 Javascript
微信小程序chooseImage的用法(从本地相册选择图片或使用相机拍照)
2018/08/22 Javascript
原来JS还可以这样拆箱转换详解
2019/02/01 Javascript
Openlayers绘制聚合标注
2020/09/28 Javascript
vue使用keep-alive实现组件切换时保存原组件数据方法
2020/10/30 Javascript
讲解Python中的递归函数
2015/04/27 Python
在Python中编写数据库模块的教程
2015/04/29 Python
python strip() 函数和 split() 函数的详解及实例
2017/02/03 Python
python opencv角点检测连线功能的实现代码
2020/11/24 Python
CSS3的Border-radius轻松制作圆角
2012/12/24 HTML / CSS
德国传统玻璃制造商:Cristalica
2018/04/23 全球购物
英国日常交易网站:Wowcher
2018/09/04 全球购物
Yves Rocher捷克官方网站:植物化妆品的创造者
2019/07/31 全球购物
个人思想理论学习的自我鉴定
2013/11/30 职场文书
食堂采购员岗位职责
2014/03/17 职场文书
省级青年文明号申报材料
2014/05/23 职场文书
大学新闻系应届生求职信
2014/06/02 职场文书
党支部群众路线整改措施思想汇报
2014/10/10 职场文书
2014年青年教师工作总结
2014/12/17 职场文书
团委工作总结2015
2015/04/02 职场文书
仰望星空观后感
2015/06/10 职场文书
选调生挂职锻炼工作总结
2015/10/23 职场文书
话题作文之成长
2019/12/09 职场文书
MySQL去除重叠时间求时间差和的实现
2021/08/23 MySQL
SQL语句多表联合查询的方法示例
2022/04/18 MySQL
Java异常体系非正常停止和分类
2022/06/14 Java/Android