今天完成的事：

学习怎么将图片上传封装成指令？

 dame

link包含了三个属性分别是scope,element,attrs

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图片上传过程图片获取的问题。

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.$apply(function () {

                $scope.img = result;

            });

        });

    };

明天计划的事：

开始任务10

遇到的问题:

额额额，angular是真的难。

收获：

学会了如何去定义上传图片的指令。