Dropzone.js 回调访问 Angular 作用域答案

【问题标题】：Dropzone.js callback access Angular scopeDropzone.js 回调访问 Angular 作用域
【发布时间】：2013-05-27 04:58:27
【问题描述】：

我已经构建了一个简单的 AngularJS 指令来在元素上实现 Dropzone.js。我想在指令之外使用 ng-repeat 显示上传的文件，但我无法使其工作，因为元素的“addfile”回调似乎正在创建数组的副本（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
                    });
                }
            })
        }
    }
});

【问题讨论】：

标签： javascript angularjs dropzone.js

【解决方案1】：

函数 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');
            });
        }
    });

}

}

【讨论】：

angular.js:14525 TypeError: Cannot read property 'push' of undefined at Dropzone.init (directives.js:377) 我做了上面出现的操作。问题是什么？谢谢
请编辑您的原始问题以包含您在评论中添加的问题。

【解决方案2】：

如果您需要 Angular 中的拖放文件功能，您可以使用这个轻量级指令： 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);
      }); 
    }
  }
}];

【讨论】：

【解决方案3】：

由于这发生在 Angular 领域之外，您必须通过将更改包装在 $apply 中来通知 Angular：

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

【讨论】：