一、今天完成的事情

1.完成搜索功能。

2.完成任务9的静态页面。

3.原先Article列表下翻页按钮和输入跳转使用pagination插件写的，感觉用插件写有点偷懒，知其然不知其所以然，今天重写了一遍，还没完成

4.傍晚听老大讲java的大体框架，开始还能理解一些，后来的就云里雾里。也是打算平时学习一些java的东西，不过得先把眼前的学好。

二、明天计划的事情

把页面按钮写完，继续任务9。

三、遇到的问题

 Angular如何上传图片。

1、定义directive

angular.module('app')

    .directive('fileModel', ['$parse', function ($parse) {

        return {

            restrict: 'A',

            link: function(scope, element, attrs, ngModel) {

                var model = $parse(attrs.fileModel);

                var modelSetter = model.assign;

                element.bind('change', function(event){

                    scope.$apply(function(){

                        modelSetter(scope, element[0].files[0]);

                    });

                    //附件预览

                    scope.file = (event.srcElement || event.target).files[0];

                    scope.getFile();

                });

            }

        };

    }]);

input标签中的属性file-model即就是Angular中的指令，在上面代码的link方法中，我们为指令file-model所在的元素绑定了change事件，change方法中获取到要上传的文件对象，并调用了controller中的getFile()方法(详见controller)

2、定义控制器UploaderControler

angular.module('app')

    .controller('UploaderController', function($scope, fileReader){

        $scope.getFile = function () {

            fileReader.readAsDataUrl($scope.file, $scope)

                .then(function(result) {

                    $scope.imageSrc = result;

                });

        };

    });

控制器中定义了一个UploaderController，该控制器在其作用域中定义了getFile()方法，getFile方法中调用了fileReader service中的readAsDataUrl方法，此方法中生成了图片的地址url，并将结果返回getFile中，将返回的url赋值给$scope.imageSrc ，根据Angular双向数据绑定的机制，img元素中ng-src属性值为url，那么就可以在页面上预览图片了。fileReader service是如何定义的呢？

3、定义service fileReader

angular.module('app')

.factory('fileReader', ["$q", "$log", function($q, $log){

   var onLoad = function(reader, deferred, scope) {

         return function () {

               scope.$apply(function () {

                     deferred.resolve(reader.result);

               });

         };

   };

   var onError = function (reader, deferred, scope) {

         return function () {

               scope.$apply(function () {

                     deferred.reject(reader.result);

               });

         };

   };

   var getReader = function(deferred, scope) {

         var reader = new FileReader();

         reader.onload = onLoad(reader, deferred, scope);

         reader.onerror = onError(reader, deferred, scope);

         return reader;

   };

   var readAsDataURL = function (file, scope) {

         var deferred = $q.defer();

         var reader = getReader(deferred, scope);         

         reader.readAsDataURL(file);

         return deferred.promise;

   };

   return {

         readAsDataUrl: readAsDataURL 

   };

}])

fileReader service主要是完成生成获取到的文件的url地址，返回到view进行预览。

4、附件上传的实现

附件上传主要是将页面表单数据通过后台提供的接口写入到数据库中，具体实现在控制器UploaderControler中增加如下代码：

   // 组装表单数据

var postData = {

    vacationType: $scope.leave.type,

    reason: $scope.leave.reason,

    familyRelation: +$scope.leave.type == 7 ? $scope.leave.relation : "",

    startTime: startTime,

    endTime: endTime,

    fileName: $scope.imageSrc,

    workDelivers: workDelivers,

    ccmailNickNames: sendPersons,

    realDays: +$scope.leave.type == 8 ? $scope.leave.timeLong : ""

};

var promise = postMultipart('/maldives/leave/save', postData);

function postMultipart(url, data) {

    var fd = new FormData();

    angular.forEach(data, function(val, key) {

        fd.append(key, val);

    });

    var args = {

        method: 'POST',

        url: url,

        data: fd,

        headers: {'Content-Type': undefined},

        transformRequest: angular.identity

    };

    return $http(args);

}postData为表单中的数据(包括上传的图片信息)，'/maldives/leave/save'表示的是请求后台的数据接口，$http是Angular内置的service，能向后台发送GET或POST请求。

四、收获

1.学习angular搜索功能。

2.了解java基础知识。