Обратный вызов Dropzone.js Угловая область

Question

Я создал простую директиву AngularJS для реализации Dropzone.js на элементах. Я хотел бы отображать загруженные файлы с помощью ng-repeat вне директивы, но я не могу заставить его работать, поскольку обратный вызов «добавленного файла» элемента, похоже, создает копию массива (scope.files) , Обратный вызов может считывать массив (или копию массива), но когда я нажимаю новый элемент на нем, это не влияет на ng-repeat. Как я могу заставить его работать?

.directive('dropzone', function() { 
    return { 
     restrict: 'EA', 
     link: function(scope, el, attrs) { 

      el.dropzone({ 
       url: attrs.url, 
       maxFilesize: attrs.maxsize, 
       init: function() { 
        scope.files.push({file: 'added'}); // here works 
        this.on('success', function(file, json) { 
        }); 
        this.on('addedfile', function(file) { 
         scope.files.push({file: 'added'}); // here doesn't work 
        }); 
       } 
      }) 
     } 
    } 
}); 

Answer 1

Как это happends вне сферы угловых вы должны уведомить Угловые изменения, обернув его в $ применяется:

this.on('addedfile', function(file) { 
    scope.$apply(function(){ 
    scope.files.push({file: 'added'}); 
    }); 
}); 

Answer 2

Если вам нужно перетаскивать файлы функциональность Угловыми вы можете использовать это легкая директива: angular-file-upload

<div ng-controller="MyCtrl"> 
    <input type="file" ng-file-select="onFileSelect($files)" multiple> 
    <div class="drop-box" ng-file-drop="onFileSelect($files);">drop files here</div> 

JS:

//inject angular file upload directive. 
angular.module('myApp', ['angularFileUpload']); 

var MyCtrl = [ '$scope', '$upload', function($scope, $upload) { 
    $scope.onFileSelect = function($files) { 
    //$files: an array of files selected, each file has name, size, and type. 
    for (var i = 0; i < $files.length; i++) { 
     var $file = $files[i]; 
     $upload.upload({ 
     url: 'my/upload/url', 
     file: $file, 
     progress: function(e){} 
     }).then(function(data, status, headers, config) { 
     // file is uploaded successfully 
     console.log(data); 
     }); 
    } 
    } 
}]; 

Answer 3

функция Dropzone() {

return function (scope, element, attrs) { 
    //scope.files="esto contiene files"; 
    console.log(scope); 


    element.dropzone({ 
     url: "upload.php", 
     maxFilesize: 100, 
     paramName: "uploadfile", 
     maxThumbnailFilesize: 5, 
     init: function() { 
      scope.files.push({file: 'added'}); 
      this.on('success', function (file, json) { 
      }); 
      this.on('addedfile', function (file) { 
       scope.$apply(function() { 
        alert(file); 
        scope.files.push({file: 'added'}); 
       }); 
      }); 
      this.on('drop', function (file) { 
       alert('file'); 
      }); 
     } 
    }); 

} 

}