确定哪个 Flow.js / ng-flow 输入（flow-btn）用于上传文件

Question

我的页面上有多个 flow-btn 元素。有一个项目列表，用户可以将单个文件直接上传到（单独）或，他们可以选择上传多个文件，这些文件将自动填充列表。一切都在flow-init 中。

有点像这个伪代码示例：

<div flow-init>
    <div flow-btn>Upload multiple images to fill the list</div>
    <h3>The list</h3>
    <ul>
        <li ng-repeat="item in items">
            <div flow-btn flow-single-file>Upload an image for this item</div>
            <img flow-img="item.flowFile">
        </li>
    </ul>
 </div>

我需要确定列表中使用了哪个flow-btn，以便我可以在正确的位置显示上传的图像缩略图。基本上我想我想从流事件中访问item。

注意：列表循环数据是由其他数据定义的，所以我不能只循环$flow.files来创建我的列表。

我该怎么做？

我应该为每个循环项创建一个新的flow-init 实例吗？矫枉过正？

编辑： 或者，也许我可以以编程方式从我的控制器中打开多个flow-btn，而不是为每个项目设置一个flow-btn？在这种情况下，我可以将当​​前项目存储在控制器中。

Answer 1

编辑。 08.2015 我在firefox下再次检查了这个，输入元素似乎不是隐藏在event.srcElement中，而是隐藏在event.originalTarget中。我已经更新了代码和 plnkr。

---

嗯，你可能知道 ng-flow 提供事件。对于这些事件，您可以传递您的函数并使用 $event 对象注入它们，该对象引用您单击的特定按钮。在您的情况下，您可以侦听 flow-files-submitted 并基于 $event.srcElement 执行如下适当的操作：

HTML

<div flow-init flow-files-submitted='handleUpload($files, $event, $flow)'>
     <div flow-btn>Upload multiple images to fill the list</div>
     <h3>The list</h3>
     <ul>
        <li ng-repeat="item in items">
            <div flow-btn flow-single-file>Upload an image for this item</div>
            <img flow-img="item.photo" ng-if='item.photo'>
        </li>
    </ul>
</div>

JS

$scope.handleUpload =  function($files, $event, $flow) {
 if(($event.srcElement !== undefined)&&($event.srcElement !== null))
  var input = angular.element($event.srcElement)
 else
  var input = angular.element($event.originalTarget)
 if (input.scope().item) {
  if(input.scope().item.photo) {
    input.scope().item.photo.cancel();
  }
  input.scope().item.photo = $files[0];
 } else {
   for(var i = 0; i < $files.length; i++) {
     $scope.items.push({photo: $files[i]});
   }
 }
};

Check out this Plunker for solution to your problem