複数のng-dropzonesを1ページに表示

Question

私は画像ファイルのアップロードを管理するためにng-dropzoneを使用しています。単一ページ内の単一のng-dropzoneでうまく動作しますが、1ページ内に複数のdropzonesがある場合は、最後の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

私はカスタムディレクティブを使用します。それを試してみてください。あなたはそれhttps://codepen.io/max-ivaneychyk/pen/JJvPmY?editors=1111

見ることができます

<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); 
       }); 

      }; 
     }])