在AngularJS中,操作DOM一般在指令中完成,那么指令是如何实现的呢?
指令的作用是把我们自定义的语义化标签替换成浏览器能够认识的HTML标签

一般的事件监听是在对静态的dom绑定事件,而如果在指令中动态生成了DOM节点,动态生成的节点不会被JS事件监听。这也是使用directive指令来处理的原因。

解决问题的开始先介绍下directive的几个属性

1.restrict
主要是定义directive自定义指令的方式,一般有以下几种
E: 表示该directive仅能以element方式使用,即:<my-dialog></my-dialog>
A: 表示该directive仅能以attribute方式使用
EA: 表示该directive

2.scope
写上该属性时,就表示这个directive不会从它的controller里继承$scope对象,而是会重新创建一个

3.link
link包含了三个属性分别是scope,element,attrs
scope就相当于上文提到scope,其实是一样的
element就相当于jquery的获取对象如$('my-dialog')
attra则是个类型map的数据类型,包括你加入指令那句html代码的所有属性。

<input type="file" id="photo_back" name="id_photo_back"
ng-model="kycpeople.id_photo_back" custom-on-change="uploadFile"/> .directive('customOnChange',function(){
return {
restrict:'A',
link:function(scope,element,attrs){
var onChangeHandler = scope.$eval(attrs.customOnChange);
element.bind('change',onChangeHandler);
}
};
});

  如上所示,自定义一个custom-on-change的指令,restrict:'A'表明该指令是一个attribute,给指令添加一个名字作为之后事件绑定触发的函数,当directive被渲染后,input就被绑定了一个change事件,当元素的值被修改时,标签input的customOnChange指令值uploadFile触发事件
如下

$scope.uploadFile = function (event) {
var file = event.target.files[0];
$scope.file = file;
};

  

以上代码解决了angular图片上传过程图片获取的问题。

那么假设此时要实现多个图片上传且实时预览,这时候要怎么实现呢?

首先,先把业务处理封装成service,如下

angular.module('app').service('foo', function ($translate) {

    this.getPrivate = function (tmp) { .  // 获取文件对象
var file = event.target.files[0];
return file;
};
this.getimgname = function (tmp) { // 获取图片名称
var filename = event.target.files[0].name;
return filename;
};
this.getimgurl = function (filename,callback) { // 获取图片并预览
if(filename==null)
{
return;
}
var tmp = new FileReader();
tmp.onload = function (ev) { //调用回调函数
callback(ev.target.result);
};
tmp.readAsDataURL(filename);
}; });

  接下来是在创建的控制器里面加入service的依赖,并使用这个service中的函数

angular.module('app').controller('kycForPersoncontroller', function (foo,$scope,$http) {
$scope.uploadFile = function (event) {
$scope.file = foo.getPrivate(event);
$scope.uploadimg=foo.getimgname(event);
foo.getimgurl($scope.file,function (result) {
$scope.img = result;
console.log($scope.img);
});
};

  到这里我遇到一个问题阻塞我的思路,就是进入service的getimgurl函数时里面有一个我自己的定义的回调函数callback(ev.target.result),添加图片后这个回调函数返回的result值即是上传图片成功后的base64值,用控制台能够打印出来,但是视图却没显示出来,这是为什么?

 <img src={{imgback}}></img>

  

数据绑定好了,图片怎么显示不出来,angular所谓的双向绑定不是有任何数据发生了变化,view会跟着改变,scope模型会自动地更新吗?

这是因为回调函数中,angular并不知道你修改了什么。就像你使用setTimeout()来更新一个scope model,它并不知道你更新什么。这种情况下,调用$apply()就是你的责任了(如上),它会自动触发$rootScope.$digest(),从而让watchers被触发用以更新view,才能做到手动更新model,view视图也会随之显示。

正确的写法

 $scope.uploadFile = function (event) {
$scope.file = foo.getPrivate(event);
$scope.uploadimg=foo.getimgname(event);
foo.getimgurl($scope.file,function (result) {
$scope.$apply(function () {
$scope.img = result;
});
});
};

  最后做下总结,AngularJS是否能检测到你对于model的修改。如果它不能检测到,那么你就需要手动地调用$apply()。

文章记录自:

http://www.jianshu.com/p/0d3652a5db21

angular上传获取图片的directive指令的更多相关文章

  1. 一般处理程序获取Layui上传的图片

    asp.net利用一般处理程序获取用户上传的图片,上传图片利用的layui 前台页面 <%@ Page Language="C#" AutoEventWireup=" ...

  2. 百度上传插件WebUploader,angularjs指令封装

    1.WebUploader特点 官网地址:http://fex.baidu.com/webuploader/ 1.1 分片.并发 分片与并发结合,将一个大文件分割成多块,并发上传,极大地提高大文件的上 ...

  3. 基于spring-boot的web应用,ckeditor上传文件图片文件

    说来惭愧,这个应用调试,折腾了我一整天,google了很多帖子,才算整明白,今天在这里做个记录和分享吧,也作为自己后续的参考! 第一步,ckeditor(本博文论及的ckeditor版本4.5.6)的 ...

  4. thinkphp 3.2.3整合ueditor 1.4,给上传的图片加水印

    今天分享一下thinkphp 3.2.3整合ueditor 1.4,给上传的图片加水印.博主是新手,在这里卡住了很久(>_<) thinkphp 3.2.3整合ueditor 1.4 下载 ...

  5. ASP.NET、JAVA跨服务器远程上传文件(图片)的相关解决方案整合

    一.图片提交例: A端--提交图片 protected void Page_Load(object sender, EventArgs e) { if (!IsPostBack) { string u ...

  6. .net mvc4 利用 kindeditor 上传本地图片

    http://blog.csdn.net/ycwol/article/details/41824371?utm_source=tuicool&utm_medium=referral 最近在用k ...

  7. MVC&WebForm对照学习:文件上传(以图片为例)

    原文  http://www.tuicool.com/articles/myM7fe 主题 HTMLMVC模式Asp.net 博客园::首页::  ::  ::  ::管理 5 Posts :: 0 ...

  8. ASP.NET MVC在服务端把异步上传的图片裁剪成不同尺寸分别保存,并设置上传目录的尺寸限制

    我曾经试过使用JSAjaxFileUploader插件来把文件.照片以异步的方式上传,就像"MVC文件图片ajax上传轻量级解决方案,使用客户端JSAjaxFileUploader插件01- ...

  9. MVC应用程序显示上传的图片

    MVC应用程序显示上传的图片 前两篇<MVC应用程序实现上传文件>http://www.cnblogs.com/insus/p/3590907.html和<MVC应用程序实现上传文件 ...

随机推荐

  1. Spring Cloud系列之客户端请求带“Authorization”请求头,经过zuul转发后丢失了

    先摆解决方案: 方法一: 方法二: zuul.routes.<routeName>.sensitive-headers= zuul.routes.<routeName>.cus ...

  2. Redis 系列之CentOS下Redis的安装

    前言 安装Redis需要知道自己需要哪个版本,有针对性的安装,比如如果需要redis GEO这个地理集合的特性,那么redis版本就不能低于3.2版本,由于这个特性是3.2版本才有的.另外需要注意的是 ...

  3. 动态规划入门——数字三角形(Java)

    动态规划的概念对于新手来说枯燥难懂,就算看懂了,做题的时候依旧抓耳挠腮的毫无头绪,这些比较难理解的算法,还是需要根据例子来一步步学习和理解,从而熟练掌握,下面,咱们就通过一个简单的小例子来学习动态规划 ...

  4. zhuan 常用图像数据集:标注、检索

      目录(?)[+]   1.搜狗实验室数据集: http://www.sogou.com/labs/dl/p.html 互联网图片库来自sogou图片搜索所索引的部分数据.其中收集了包括人物.动物. ...

  5. HTTP上传数据 :表单,二进制数据(multipart/form-data application/octet-stream boundary)

    使用WinINet 一个较简单的例子:上传头像 void CBackstageManager::UpdateAvatarThreadProc(LPVOID params) { stForThread* ...

  6. 每天CSS学习之text-align

    text-align是CSS的一个属性,其作用是设置文本的对齐方式.其值如下所示: 1.left:文本左对齐.如下所示: div{ text-align:left; } 结果: 2.right:文本右 ...

  7. 4.1 C++多态的概念及前提条件

    参考:http://www.weixueyuan.net/view/6370.html 总结: 而多态的功能则是将函数名动态绑定到函数入口地址,这样的动态绑定过程称为运行期绑定. 而在运行期绑定的函数 ...

  8. Windows server 2016 安装 TFS

    一:准备: 1.1下载TFS https://visualstudio.microsoft.com/zh-hans/tfs/ 1.2 下载SQL2017 http://msdn.itellyou.cn ...

  9. 用servlet实现用户登录案例

    以下实现登录窗口 Login.jsp <!--Login.jsp--> <%@ page language="java" import="java.ut ...

  10. L248 词汇题 2006

    The audience, hostile at first, were greatly impressed by her excellent performance. He wanted to st ...