首次上传后禁用 Ink Filepicker 拖放窗格答案

【问题标题】：Ink Filepicker drag and drop pane disabled after first upload首次上传后禁用 Ink Filepicker 拖放窗格
【发布时间】：2014-05-19 13:24:24
【问题描述】：

我在指令中使用filepicker.makeDropPane() 将带有ng-model 的任何div 放到一个拖放窗格中，该窗格将生成的InkBlob 保存到ngModel。

angular.module("app", []).directive("dropzone", function () {
  return {
    require: "ngModel",
    link: function (scope, element, attrs, ngModel) {

      filepicker.makeDropPane(angular.element(element)[0], {
        dragEnter: function () {
          console.log("Entered dropzone");
        },
        onSuccess: function (InkBlobs) {
          ngModel.$setViewValue({
            key: InkBlobs[0].key,
            url: InkBlobs[0].url
          }
        }
      });
    }
  }
});

第一次拖放上传会起作用，但一旦成功上传，任何进一步的拖放尝试都将无济于事。

dragEnter 日志消息将不再被调用，这很奇怪，因为我希望禁用的下拉窗格充当浏览器窗口的其余部分，将文件拖到它上面只会打开该文件给定的选项卡。但是在第一次成功上传后将文件拖到元素上根本不会做任何事情——dragEnter、dragLeave、onStart、onSuccess 和 onError 函数都不会被调用，但浏览器不会打开文件。将文件拖动到给定元素以外的位置时，浏览器确实会打开文件。

我怀疑 angular 可能会在此处使用指令模板进行某些操作，这会破坏拖放窗格配置，因此我尝试通过执行 $compile(element)(scope) 重新编译 onSuccess 中的指令，但这没有效果。

什么可能导致这种行为？如果我有任何反馈会更有意义，但在第一次成功上传后绝对不会调用提供的回调函数。

【问题讨论】：

标签： javascript angularjs drag-and-drop angularjs-directive filepicker.io

【解决方案1】：

我仍然不知道发生这种情况的根本原因，以下可能只是围绕它的一个技巧，但以防万一其他人处于类似情况，这就是我修复它的方法。

我没有将带有指令的元素放入放置窗格 (filepicker.makeDropPane(angular.element(element)[0], ...)，而是以编程方式在元素内部创建一个子 div，并将其配置为放置窗格：

function create_pane () {
  var pane = angular.element("<div/>");
  element.append(pane);
  configure_pane(angular.element(pane)[0]);
}

function configure_pane (pane_node) {
  filepicker.makeDropPane(pane_node, {
    onSuccess:  save_img,
    ...
  });
}

然后，每次成功保存图像时，我都会删除子节点并再次创建和配置窗格，这会完全重新初始化放置窗格，允许我再次放入文件：

function save_img (InkBlobs) {
  ...
  reset_pane();
}

function reset_pane () {
  emptyNode(angular.element(element)[0]);
  create_pane();
}

我的想法来自Filepicker widget breaks after upload

【讨论】：