Question

HTML视图：

<form>
        <input type="file" file-input="files" multiple/>
      <button ng-click="initUpload()">Upload</button>
</form>

我从本网站上找到的各种答案中借用了以下指令（以绑定多个文件类型输入）：

module.directive('fileInput', ['$parse', function ($parse) {
    return {
        restrict: 'A',
        link:function(scope, elm, attrs){
         var model = $parse(attrs.fileInput);
         var isMultiple = attrs.multiple;
         var modelSetter = model.assign;
         elm.bind('change', function(){
            var values =[];
            angular.forEach(elm[0].files, function(item){
              var value = {
                name: item.name,
                  type: item.type,
                  _file: item
              };
              values.push(value);

            });

            scope.$apply(function(){
               if(isMultiple){
                   modelSetter(scope, values);
               } else{
                   modelSetter(scope, values[0]);
               }
            });
         });
        }
    }
}]);

底线问题是：在控制器中，我将如何访问文件数组？目前我正在尝试使用$scope.values[i]访问它们，但这不起作用。

如果我尝试查找上传的文件数量，我认为$scope.values.length理想情况下应该有效吗？

我在这里缺少什么？

Answer 1

如果你对同一范围指令没问题。您可以通过以下方式实现此目的。

app.directive('fileInput', function() {
  return {
    scope: false,
    link: function(scope, element, attr) {
      element.on('change', function(event) {
        scope[attr.fileInput] = event.target.files;
      });
    }
  };
});

Codepen

将多个文件输入数据绑定到AngularJS中的数据模型

1 个答案: