今天完成的事情：

指令封装：

将原来的地区二级联动封装为三级联动指令；

了解angular-uploader插件，插件图片预览实现用canvas，之前做任务用HTML5 API FileReader和window.URL.createObjectURL,相对熟悉，所以带样式+预览再封装了一次；

明天计划的事情：

完成公司新增+修改

遇到的问题：

考虑到复用性，所以封装指令时用了封闭作用域，原以为没什么问题，但结果不尽人意；

.directive('upLoader', function (FileUploader) {
    return {
        restrict: 'E',
        templateUrl: 'Pages/template/upload.html',
        scope: {
            logoUrl: '=',//图片上传后地址
         logoid: '@upId',//id
        },
        replace: 'true',
        link: function (scope, ele, attr) {
            scope.uploader = new FileUploader({//实例化
                url: '/lbd-admin/a/u/img/test'
            });
            /*  var id= '#'+scope.logoid;*/
            getUrl = function (files) {
                scope.fileList = files;
                scope.imgURL = window.URL.createObjectURL(scope.fileList[0]);//考虑性能用后清除
                /*$(id).attr('src',scope.imgURL);*/
            }
            scope.uploader.onSuccessItem = function (item, response) {
                scope.logoUrl = response.data.url
            }
            scope.loadend = 'true'
        }

    }
})

一个页面只用一个图片上传指令，预览图可以正常显示，但用上第二个指令后，前面的预览图都挂了；

指令中：读取图片url后，通过双向绑定ng-src，单个指令正常，多指令只能最后一个预览；

     通过ID设置src，同上；

打断点发现每次赋的参数都会被后面的指令参数覆盖掉，导致图片url找不到宿主，之后最后一个可以正常设置属性；这里想不明白，封闭的作用域，通过什么来影响到上一个指令内容，因为做了两次实例化才使得后面的覆盖前面的？感觉给插件套马甲很奇怪。。。。

考虑再三，可以先等前面指令功能完成再实例化后面的指令，这样就影响不到之前的内容：

<up-loader up-id="logo1"  logo-url="vm.companyLogo"></up-loader>

<up-loader up-id="logo2"  logo-url="vm.logo2" ng-if="vm.companyLogo"></up-loader>

第一条指令为上传公司logo（必填），第二条为产品logo（选填），其实逻辑上也没什么大问题。。。。。。放产品logo先得把公司必填字段都完成。。。

下来再想想。

F12看了一下作用域，昨天因为在当前作用域下没找到函数，所以用了原生的方法，导致后面的覆盖前面的，作用域无效（直接调用的不是scope下的函数）今天再找了一下，发现应该在input的父作用域调用getUrl，

解决问题

onchange="angular.element(this).scope().getUrl(this.files)

onchange="angular.element(this).scope().$parent.getUrl(this.files)

各位小伙伴新年快乐

收获：

如上