2018年，新的一天，新的开始，今天终于把这个优化的需求改好了，记录一下。
2017年岁末的时候，我开始听知乎live,听了一篇忘记名字的大咖讲到，养成写博客的习惯，即可以帮助有需要的人，更重要的是能够帮你提升思维，特别是在技术遇到瓶颈时，写下一篇解决问题的技术博客，有助于重燃激情，废话不多讲…

实现需求：
1.根据设置的不同，可能有多个上传功能
2.流程是初始化为“上传表格”，选中后为“上传中…”，(请求结束后上传按钮才可点击)结束后为“继续上传”（按钮可以点击）

效果图：

list.html

<tbody><tr ng-repeat="prize in prize_list"><td ng-bind="prize.name"></td><td ng-bind="prize.code_cnt || 0"></td><td><dzp-file-upload index="$index" list="prize_list" ng-if="prize.status == 1" btn-name="上传表格" disable="prize.disable" change="uploadExcel(file, prize)"></dzp-file-upload><dzp-file-upload index="$index" list="prize_list" ng-if="prize.status == 2" btn-name="上传中..." disable="prize.disable" change="uploadExcel(file, prize)"></dzp-file-upload><dzp-file-upload index="$index" list="prize_list" ng-if="prize.status == 3" btn-name="继续上传" disable="prize.disable" change="uploadExcel(file, prize)"></dzp-file-upload></td><td ng-bind="prize.tip"></td></tr>
</tbody>

list.js

//初始化数据：$scope.showCodeModal = function (dzp) {$scope.dzp_id = dzp.id;apiService.post("/werenwu/dzp/virtualPrize", { id: $scope.dzp_id }).success(function (res) {$scope.prize_list = [];res.data.list && res.data.list.forEach(function (value) {value.status = 1;value.index = '';value.disable = false;$scope.prize_list.push(value);});res.data.list.length == 0?$scope.dialog = true:$scope.dialog = false;});$("#code-modal").modal("show");};//上传接口：$scope.uploadExcel = function (file, prize) {var form = new FormData();form.append("code_excel", file);form.append("prize", prize.prize);form.append("id", $scope.dzpList[0].id);setTimeout(function(){apiService.file("/werenwu/dzp/importCode", form).success(function (res) {if (res.errcode == 0) {prize.code_cnt = res.data.total;prize.tip = "上传完成，成功了" + res.data.success + "条， 失败了" + res.data.error + "条"} else {swal("错误", res.errmsg, "error");}if(res.errcode!== ''){for(var key in $scope.prize_list){if($scope.prize_list[key].index == prize.index && $scope.prize_list[key].status == 2){$scope.prize_list[key].status = 3;$scope.prize_list[key].disable = false;}}}});}, 500);};

dzpFileUpload.html

<style>.fileUpload-wrap {position: relative;}.fileUpload-wrap input {position: absolute;top: 0;left: 0;width: 85px;bottom: 0;z-index: -1;}
</style><div class="fileUpload-wrap"><button type="button" class="btn btn-success" ng-click="clickHandle()">{{btnName}}</button><input ng-required="ngRequired" type="file" ng-style="inputStyle" ng-disabled="disable"/></div>

dzpFileUpload.js

angular.module("app").directive("dzpFileUpload", [function () {return {scope: {fileBase64: '=',fileModel: '=',btnName: '@',reChooseName: '@',ngRequired: '=',inputStyle: '=',maxSize: '@',minSize: '@',fileType: '@',errorInfo: '@',showName: '@',change: "&",disable: "=disable",index: "=index",list: "=list",},restrict: "E",templateUrl: '/views/directives/dzpFileUpload.html',link: function (scope, element, attributes) {var rule = new RegExp(scope.fileType);var fileInput = element.find('input');scope.clickHandle = function () {fileInput.trigger('click');};scope.editList = function(status,current){for(var key in scope.list){if(scope.index == key){scope.list[key].status = status;scope.list[key].index = current;scope.list[key].disable = true;}}}scope.reChooseName = scope.reChooseName ? scope.reChooseName : "重新选择";scope.$watch("fileModel", function () {if (!scope.fileModel) {$(element[0]).find("input[type=file]").val("");}});fileInput.bind("change", function (changeEvent) {scope.current = changeEvent.originalEvent.path[4].rowIndex;scope.editList(2,scope.current);var file = changeEvent.target.files[0];if (!file) return;if (scope.fileType && !file.type.match(rule)) {return swal(scope.errorInfo || '上传文件类型错误', '请重试', 'error')}if (scope.maxSize && file.size / 1024 > scope.maxSize) {return swal('上传大小不能超过' + scope.maxSize / 1024 + "M", '请重试', 'error')}if (scope.minSize && file.size < scope.minSize) {return swal('上传大小不能超过' + scope.minSize, '请重试', 'error')}if (file.name.length > 30) {scope.filename = file.name.substr(0, 10) + "......" + file.name.substr(-12);} else {scope.filename = file.name;}if (scope.change) {scope.change({"file": file});}scope.fileModel = file;if (file.type.match(rule)) {// 预览图片var reader = new FileReader();reader.onload = function (loadEvent) {scope.$apply(function () {scope.fileBase64 = loadEvent.target.result;});}reader.readAsDataURL(file);}});}}
}]);

实现总结：

1.自定义指令好写，但真的写起来，中间再互相引用传值，就是控制器与指令之间如何修改想要的值，如果对scope作用域不了解，还是会遇到一些坑
2.网上不会有相同的需求，还是要自己去设计代码实现，也就是自己要有思路
3.自定义指令部分，只在为文件检验，上传做准备，看看文件上传的几个属性应该就可以
4.更合乎用户体验的需求，就要费点事了，主要是通过关联ng-repeat,ng-if,操控result添加自己需要控制状态的属性
实现：
4.1在数据集中添加自己需要控制状态的属性，做好初始化，在list.html,list.js中有
4.2在自定义指令dzpFileUpload.js中获取要改变的数据list,改变status和disabled,
4.3在请求结束后再次改变状态
4.4我之前是把要操控的数据放在了自定义指令中，把显示层做在了自定义的html片段上，这样在成功后修改状态时，在自定义指令中常规获取应该获取的还是没有改变的状态，要调用$watch检测，这样感觉影响性能（这是我上一版的做法，测试没有发现，是我自己点出来的，今天闲来无事完善了一下）