0

我的页面上有多个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为每个项目打开一个？在这种情况下，我可以将当​​前项目存储在控制器中。

4

1 回答 1

0

编辑。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]});
   }
 }
};

查看此 Plunker 以解决您的问题

于 2015-08-21T10:35:39.997 回答