Question

我在指令中使用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功能都不起作用被调用，但浏览器也不会打开文件。将浏览器拖动到给定元素以外的其他位置时，浏览器会打开该文件。

我怀疑这里的角度可能与指令模板有关，这会弄乱下拉窗格配置，所以我尝试通过执行onSuccess在$compile(element)(scope)中重新编译指令，但这没有效果。

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

Answer 1

我仍然不知道发生这种情况的根本原因，以下可能只是一个黑客攻击，但以防万一其他人处于类似情况，这就是我修复它的方法。 / p>

我没有将带有指令的元素放入下拉窗格（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

得到了这个想法

首次上载后，Ink Filepicker拖放窗格被禁用

1 个答案: