今天完成的事情：任务9图片上传功能完成，任务九初步完成
明天计划的事情：任务十，“增、删、改、查”四个功能还差增和改这两个
遇到的问题：

1.css样式污染，由于引入bootstrap的原因，虽然每个页面分开懒加载了各自的样式文件，但是还是存在样式需要刷新才能正确显示的情况。

2.

上传图片思路:

1.

angular.module('myApp', [])
    .directive('fileModel', ['$parse', function ($parse) {
        //自定义指令，定义一个属性fileModle
        return {
            restrict: 'A',
            link: function (scope, element) {
                element.bind('change', function (event) {
                    //为一个元素绑定一个事件
                    scope.file = (event.srcElement || event.target).files[0];
                    scope.getFile();
                });
            }
        };

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

.controller('Upload', function ($scope, fileReader, $http, uploadFileService, loginService) {
    $scope.getFile = function () {
        fileReader.readAsDataUrl($scope.file, $scope)
        //获取API异步读取的文件数据，另存为数据URL
        // 将该URL绑定到img标签的src属性上，就可以实现图片的上传预览效果
            .then(function (result) {
                $scope.imgSrc = result;
            });
    };

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

.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进行预览。

收获：

1.directive（指令）和Controller（控制器）、Service（服务）的应用范围：

当我们需要在不同的域中共享数据的时候要使用service

 controller应该纯粹地用来把service、依赖关系、以及其它对象串联到一起，然后通过scope把它们关联到view上。如果在你的 视图里面需要处理复杂的业务逻辑，那么把它们放到controller里面也是一个非常不错的选择。

directive用来操作和修改DOM

2.

restrict属性,并设置只值为 "A",来设置指令只能通过属性的方式来调用:

3.

event.srcElement 

设置或获取触发事件的对象。 

引用对象，这个对象有什么属性，就可以使用。 

常用的有： 

event.srcElement.TagName     //事件对象的html标记 

event.srcElement.innerText   //事件对象的内文本 

event.srcElement.value     //表单事件对象的值