angularjs - AngularJS：如何显示图像列表（通过拖放）

Question

我想知道如何显示图像列表（通过拖放）。我已经有了拖放部分的指令。但是在我的应用程序中，我在哪里“解析” 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;
            });
        };
    })

Answer 1

假设该fileList变量包含已拖放的文件，即以下面一行作为参考：

// FileList should go to the controller/view
var fileList = evt.dataTransfer.files;

...您只需将fileList变量更改为范围变量而不是局部变量。因此，上面的代码将读取

$scope.fileList = evt.dataTransfer.files;

您不需要$scope.$apply()遵循上述代码的函数。相反，您的文件应该已经存在于$scope.fileList. 然后使用可以在包含该drop-target指令的视图中使用此变量。