一页中有多个 ng-dropzones

Question

我使用ng-dropzone 管理我的图片文件上传。它在单个页面中的单个 ng-dropzone 中运行良好，但是当涉及到单个页面中的多个 dropzone 时，只有最后一个 dropzone 可以工作。另一个放置区将不起作用。目前，我正在从后端获取图像 URL 并解析为 dropzone 作为默认缩略图。

HTML

// Doesn't show the thumbnail image
<ng-dropzone ng-show="random", options="dzOptionInit" callbacks="dzCallbacks" methods="dzMethods" class="dropzone"></ng-dropzone>

// Show thumbnail image
<ng-dropzone ng-show="random2", options="dzOptionInit" callbacks="dzCallbacks" methods="dzMethods" class="dropzone"></ng-dropzone>

控制器

$scope.dzMethods = {};
$scope.dzOptionInit = {
  url: '#',
  paramName : 'photo',
  maxFilesize : '25',
  acceptedFiles : 'image/jpeg, images/jpg, image/png',
  addRemoveLinks : true,
  autoProcessQueue : false,
  maxFiles: 1
};

$scope.dzCallbacks = {
  'addedfile' : function(file){
     $scope.newFile = file;
     ..
  },
  'success': function(){
     ..
   }, 
  'removedfile': function(){
     ..
   },
};

Service.GetData(function(data){
    $scope.calculators.featured_photo = data.featured_photo;
    $scope.myDz = $scope.dzMethods.getDropzone();
    var mockFile = {serverImgUrl : $scope.calculators.featured_photo};
    $scope.myDz.emit("addedfile", mockFile);
    $scope.myDz.emit("success", mockFile);
    $scope.myDz.emit("thumbnail", mockFile, 
    $scope.calculators.featured_photo);
    $scope.myDz.createThumbnailFromUrl(mockFile, mockFile.serverImgUrl, null, true);
    $scope.myDz.files.push(mockFile);
});

我曾尝试以非角度的方式查看similar stackoverflow question。但还是不知道。

Answer 1

我使用自定义指令。试试看。

<div class="drop" ng-dropzone="addImage($event)">
        Drop images here
</div>


// ./js/directives.js
angular
    .module('myGenerator') // myGenerator replace to your name module!!
    .directive('ngDropzone', ['$parse', function ($parse) {
        return {
            restrict: 'A',
            compile: function ($element, attr) {
                var fn = $parse(attr['ngDropzone']);
                return function (scope, element) {
                    element.on('dragover', function (e) {
                        e.stopPropagation();
                        e.preventDefault();
                        e.dataTransfer.dropEffect = 'copy';
                    });
                    element.on('drop', function (e) {
                        var callback = function () {
                            fn(scope, {$event: e});
                        };
                        e.stopPropagation();
                        e.preventDefault();
                        scope.$apply(callback);
                    });
                }
            }
        }
    }]);

// ./js/controller.js
angular
    .module('myGenerator')// myGenerator replace to your name module!!
    .controller('DropCtrl', ['$scope',  function ($scope) { // replace name controlller
            // Load all images
            $scope.addImage = function (e) {
            // create array with files
                var files = Array.prototype.slice.call(e.dataTransfer.files);
                files.forEach(function(file){
                    alert("Added File " + file.name);
                });

            };
        }])

你可以看到https://codepen.io/max-ivaneychyk/pen/JJvPmY?editors=1111