Определите, какой вход Flow.js / ng-flow (flow-btn) использовался для загрузки файла

Question

Определите, какой вход Flow.js / ng-flow (flow-btn) использовался для загрузки файла

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 для каждого элемента цикла? Overkill?

Редактировать: В качестве альтернативы, возможно, я могу открыть несколько flow-btn из моего контроллера программно, а не иметь flow-btn для каждого элемента? В этом случае я мог бы спрятать текущий элемент в контроллере.

Daniel Crisp 20 авг. 2015, в 14:29

Источник

Теги:

javascript

angularjs

flow-js

ng-flow

1 ответ

Ещё вопросы

Rafal2228 · Accepted Answer · 2015-08-21T08-47-00.000Z

Редактировать. 08.2015 Я проверил это еще раз под firefox, и элемент ввода, похоже, скрыт не внутри event.srcElement, а в event.originalTarget. Я обновил код и plnkr.

Ну, как вы, вероятно, знаете, что ng-поток предоставляет события. К этим событиям вы можете передавать свои функции и вводить их с помощью объекта $ event, который имеет ссылку на определенную кнопку, которую вы нажали. В вашем случае вы можете прослушать переданные файлы файлы и на основе $ 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 для решения вашей проблемы