requireJS优化器后的角度删除答案

【问题标题】：Angular delete after requireJS optimizerrequireJS优化器后的角度删除
【发布时间】：2016-09-13 08:53:04
【问题描述】：

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

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

requireJs后状态改变后删除的Stack不同。

没有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。有任何想法吗？

问候彼得。

【问题讨论】：

标签： javascript jquery angularjs angularjs-directive requirejs

【解决方案1】：

据我所知，你不需要在这里调用 destroy，因为 - 正如你所说 - 一旦元素从 DOM 中删除，JQuery 已经在处理它。

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

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

到目前为止我的假设。

我这边还有两个cmets：

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

【讨论】：