Javascript 在特定情况下未触发onChange事件

我正在使用一个模块将上传的文件转换为base64（）

基本上，我让它在base64编码之前执行文件类型和大小验证。除了一个非常特殊的情况外，它工作得非常好。 当我上传一个文件，但它不有效（例如，超过最大大小）时，它会给我一个响应（在下面的plnkr中，它将是一个警报，便于跟踪）。如果我再次尝试上传完全相同的文件，它不会触发事件。虽然没有上传，但我也没有收到回复

.directive('baseSixtyFourInput', ['$window', function ($window) {
return {
  restrict: 'A',
  require: 'ngModel',
  scope: {
    maxSize: '=baseSixtyFourMaxSize',
    acceptedFormats: '=baseSixtyFourAcceptedFormats'
  },
  link: function (scope, elem, attrs, ngModel) {
    var fileObject = {};

    var abort = function (message) {
      alert(message);
      return false;
    };

    scope.readerOnload = function (e) {
      blah, blah...
    };

    var reader = new FileReader();
    reader.onload = scope.readerOnload;

    //THIS EVENT DOES NOT GET FIRED
    elem.on('change', function () {
      if (!elem[0].files.length) {
        return;
      }

      var file = elem[0].files[0];

      (validations here)

      fileObject.filetype = file.type;
      fileObject.filename = file.name;
      fileObject.filesize = file.size;
      reader.readAsArrayBuffer(file);
    });

    function _arrayBufferToBase64(buffer) {
      blah blah...
    }
  }
};

我一直在试图找出原因，因为它是由“元素”的更改触发的，所以我试图在循环结束之前手动更改它，所以如果我尝试上载相同的文件，元素是不同的，因此，更改了。 我还没有成功完成它，因为显然我不能直接编辑它。我尝试使用$compile和.replaceWith（）以及其他几十次尝试，但都没有成功

这是一个例子

---

（注意，input[按钮]保留了文件名。我相信问题的根源在于HTML如何处理文件输入…但最后我并不介意视觉部分，因为我正在设计按钮的样式，这样名称就不会出现）

好的，所以我一直在搜索，最终找到了一种清除它的方法，使用输入id

在abort函数上，在退出应用程序之前刚刚添加了一个清理例程：

var abort = function (message) {
  alert(message);
  document.getElementById(elem[0].attributes[1].value).value = '';
  return false;
};

这是我的建议

这将允许按id清理输入。唯一的问题是html元素上必须有id（无论如何都应该存在），但不必担心它的名称，因为它将通过元素属性来确定它。 有没有更干净的方法来执行此操作