今天这篇日报，主要总结关于图片上传的内容

1. 首先是关于图片上传的angularjs引入

原本使用的是自己引入的一版angularjs-file-upload，但是实际去做图片上传的时候发现这个版本比较老，会导致自定义指令的报错，所以改用了cdn链接

<script src="//cdn.bootcss.com/angular-file-upload/2.1.4/angular-file-upload.min.js"></script>

2. 在add页面增添对应的html内容

<up-loader label-name="配图" ng-model="params.img" tip="文章配图"></up-loader>

add页面是信息新增页面，这里使用了语义化标签，可参考：http://damoqiongqiu.iteye.com/blog/1917971，这里通过angularjs的directive机制向add插入了html内容

它对应的js

angular.module('theApp')

/*传图片*/
    .directive('upLoader',[
        //directive是注册指令，后面的内容会被注册成一个html标签
        'FileUploader',
        function (
            FileUploader
        ) {
            return {
                restrict: 'E', //改变dom的命令，ECMA
                templateUrl: '/pic/upload.html',
                scope: {
                    logoUrl: '=ngModel',//图片上传后地址
        labelName: '@',
                    tip:'@'//提示语
                },

.directive后面的内容会被变成一个语义化标签，通过它触发函数function（fileuploader），restrict属性应用可参考https://my.oschina.net/yongqing/blog/296255，根据属性，E表示这个指令是一个元素，通过templateUrl将这一指令插入的html文件链入，其中图片上传后地址将会进行双向绑定

3. 引入的upload.html

<input id="ffe" style="display: none" type="file" accept=".jpg,.png,.bmp" class="form-control" nv-file-select=""
       uploader="uploader" multiple
       ng-click="clearItem()" onchange="angular.element(this).scope().$parent.getUrl(this.files)"
       required>

通过input type=“file”上传图片，通过onchange事件获得当图片被上传时该图片的url，并通过ng-click事件触发函数，点击上传时清空待上传图片队列

运用ng-show 指令，在表达式为 true 时显示指定的 HTML 元素（否则隐藏指定的 HTML 元素），显示待上传图片，

<div ng-show="uploader.queue.length||logoUrl">
    <img style="max-height: 300px" ng-src="{{imgURL||logoUrl}}">
    <br>
    <br>
</div>

上传相关部分代码参考图片上传插件

通过上传和删除button绑定ng-click事件，触发对应的函数进行增加和删除操作