Question

我们在angular中编写了一个指令，它使用了blueimp-fileupload。只要我们不使用requireJs优化器，代码就可以正常工作。但是在我们运行requireJs优化器之后，我们得到以下错误：

错误：在初始化之前无法调用fileupload上的方法; 试图调用方法'destroy'

在requireJs之后，状态改变后的删除堆栈是不同的。

Wihtout RequireJs它只调用一次这个函数：

  jQuery.cleanData = function(elems) {
      var events;
      for (var i = 0, elem; (elem = elems[i]) != null; i++) {
        events = jQuery._data(elem, "events");
        if (events && events.$destroy) {
          jQuery(elem).triggerHandler('$destroy');
        }
      }
      originalCleanData(elems);
    };

但在RequireJs优化器之后，它调用函数cleanData 3次（但是不同的实现，一次在jquery.js，jquery-ui.js和jquery-ui-custom。

使用requireJs优化器，它会调用这两个函数（第一个调用两次，第二个调用一次）：

 $.cleanData = function(elems) {
     for (var i = 0, elem; (elem = elems[i]) != null ; i++) {
          try {
             $(elem).triggerHandler("remove");
             // http://bugs.jquery.com/ticket/8235
           } catch (e) {}
         }
      _cleanData(elems);
  };

  jQuery.cleanData = function(elems) {
      var events;
      for (var i = 0, elem; (elem = elems[i]) != null; i++) {
        events = jQuery._data(elem, "events");
        if (events && events.$destroy) {
          jQuery(elem).triggerHandler('$destroy');
        }
      }
      originalCleanData(elems);
    };

如果我删除jQuery.cleanData的两个实现，那么它在requireJs之后工作，但这不是解决方案。问题发生在角度状态改变之后，由于异常而没有完成执行然后陷入困境。

这是Angular指令的js：

        define('misc/directives/fileUpload', ['../app'], function(app) {
            return app.directive('fileUpload', function() {
                return {
                    restrict: 'A',
                    template: '<input type="file" name="files[]">',
                    scope: {
                        onAdd: '=onAdd',
                        options: '=options'
                    },
                    link: function($scope, $element, $attrs) {
                        if ($attrs.multiple != null ) {
                            $element.find('input').attr('multiple', 'multiple');
                        }
                        return $element.fileupload(angular.extend({
                            autoUpload: false
                        }, $scope.options)).on('fileuploadprocessdone', function(e, data) {
                            return $scope.$apply($scope.onAdd(data.files));
                        }).on('$destroy', function() {
                            return $element.fileupload('destroy');
                        });
                    }
                };
            }).directive('fileUploadPreview', function() {
                return {
                    restrict: 'A',
                    scope: {
                        uploadFile: '=uploadFile'
                    },
                    link: function($scope, $element, $attrs) {
                        return $scope.$watch('uploadFile', function(file) {
                            $element.empty();
                            if (file != null ? file.preview : void 0) {
                                return $element.append(file.preview);
                            }
                        });
                    }
                };
            });
        });

什么可能导致此问题，我们可以做些什么来解决它？是调用return $ element.fileupload（'destroy'）;必要？似乎cleanData是内部jquery方法，我们现在应该继续他们做什么或者他们是否在see this question。有任何想法吗？

对彼得说。

Answer 1

据我所知，你不需要在这里调用destroy，因为 - 就像你说的那样 - 一旦元素从DOM中移除，JQuery就已经在处理它了。

如果您在Angular中的场景是例如部分的更改，那么可能就是这种情况。

错误消息还表明该元素不再应用fileupload，因为它之前已被删除。

到目前为止我的假设。

我的另外两条评论：

当blueimp已经独立完成时，你创建自己的角度指令的原因是什么？
我肯定会检查requirejs设置，因为在优化和非优化模式下行为应该相同。

requireJS优化器后的角度删除

1 个答案: