Dropzone.js回调访问角度范围

Ant*_*nna 3 javascript angularjs dropzone.js

我已经构建了一个简单的AngularJS指令来在元素上实现Dropzone.js.我想在指令之外使用ng-repeat显示上传的文件,但我不能使它工作,因为元素的'addedfile'回调似乎是在创建数组的副本(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
                    });
                }
            })
        }
    }
});
Run Code Online (Sandbox Code Playgroud)

joa*_*mbl 5

因为这发生在Angular的范围之外,你必须通过将它包装在$ apply中来通知Angular:

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