画像のリストを表示する方法を知りたいと思っていました(ドラッグアンドドロップを介して)。ドラッグアンドドロップ部分のディレクティブは既に持っています。しかし、私のアプリのどこで FileList を「解析」し、ディレクティブからパーシャルにデータを渡すにはどうすればよいでしょうか? これはコントローラーの仕事ですか?
/**
* Adds drag&drop functionality to a div
* @Example: <div drop-target ng-class="{active:isHot}" class="dropzone">Drop here</div>
*/
angular.module('myApp.directives').
directive('dropTarget', function () {
return function ($scope, $element) {
// Drophandler passes a fileList to the controller
$element.bind('drop', function (evt) {
evt.stopPropagation();
evt.preventDefault();
// FileList should go to the controller/view
var fileList = evt.dataTransfer.files;
console.log(fileList);
$scope.$apply(function () {
$scope.imageList = fileList;
});
return false;
});
// DragOverHandler highlights the dropzone
$element.bind('dragover', function (evt) {
evt.stopPropagation();
evt.preventDefault();
$scope.isHot = true;
return evt.dataTransfer.dropEffect = "copy";
});
// DragOverHandler de-highlights the dropzone
$element.bind('dragleave', function (evt) {
evt.stopPropagation();
evt.preventDefault();
$scope.isHot = false;
});
};
})