AngularJs

Question

我很乐意使用解决方案@Snowman 对 this question

的回答中的文件选择器

但是，现在我想在 ng-repeat 循环中使用它，但卡住了。

我冒昧地复制了那个问题的解决方案：

angular
  .module('app.services')
  .directive('fileChange', function() {
    return {
     restrict: 'A',
     scope: {
       handler: '&'
     },
     link: function (scope, element) {
      element.on('change', function (event) {
        scope.$apply(function(){
          scope.handler({files: event.target.files});
        });
      });
     }
    };
});

<input type="file" file-change handler="fileSelect(files)">

$scope.fileSelect = function(files) {
  var file = files[0];
  var reader = new FileReader();
  reader.onload = function(e) {
    console.log("on load", e.target.result);
  }
  reader.readAsText(file);
}

如何向 $scope.fileSelect() 函数指示哪张照片刚刚被选中？

[更新]啊！我刚刚意识到我没有把问题说清楚。我需要文件名，和一些来自重复的其他数据。假设我想要一个文件名和图像的描述，由用户输入。

所以，我已经声明了

$scope.image = {'fileName' : '',
                'description' : ''};

$scope.images = [];   // array of $scope.image

并且，在 HTML 中，在 ng-repeat 中，我将有（仅伪代码）

<ng-repeat image in images>
   <input type="text" ng-model="image.description"/>
   <input type="file" file-change handler="fileSelect(files)">

最后一个<input>不会码字了。理想情况下，我想将 image 对象传递给 file-change handler 函数。

我该怎么做？

[最终更新] 以防万一有人读了这篇文章并发现它很有趣。

<ng-repeat image in images>
   <input type="text" ng-model="image.description"/>
   <input type="file" file-change handler="fileSelect(image , files)">

添加了一个 image 参数，也添加到控制器中的 $scope.fileSelect(image , files)。请注意，不需要对指令进行更改。

很有魅力

Answer 1

我在这里尝试了一些不同之处，并且它正在运行。我唯一改变的是我添加到测试中的控制器。

看看我是怎么做到的：（点击运行代码片段查看实际效果）

angular
  .module('app.services', [])
  .controller('TestController', function($scope) {
    $scope.inputs = [1,2,3,4];
    
    $scope.fileSelect = function(files) {
      var file = files[0];
      var reader = new FileReader();
      
      reader.onload = function(e) {
        console.log("on load", e.target.result);
      }
      
      reader.readAsText(file);
    }
  })
  .directive('fileChange', function() {
    return {
     restrict: 'A',
     scope: {
       handler: '&'
     },
     link: function (scope, element) {
      element.on('change', function (event) {
        scope.$apply(function(){
          scope.handler({files: event.target.files});
        });
      });
     }
    };
});

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Angular test</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular.min.js"></script>
</head>
<body ng-app="app.services">

<div ng-controller="TestController as ctrl">
  <input type="file" 
         file-change 
         handler="fileSelect(files)"
         ng-repeat="input in inputs">
</div>

</body>
</html>

快速说明：根据您的机器，您使用的 console.log 命令运行可能会非常慢（因为它正在记录文件的内容）

AngularJs - ng-repeat 中的文件选择器

AngularJs - file selector in ng-repeat

angularjs-ng-repeat