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指令的视图中使用此变量。

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

1 个答案: