Angular JSアップロードファイルがIEで2回発生する

Question

ファイルのアップロードを処理するディレクティブがあり、リストに表示されます。このため私はエクスプローラを開くためのカスタムボタンを持っています。ユーザーがエクスプローラシステムからファイルを選択すると、リストにファイル名が2回表示されます。デバッグ後、私は "onClick"メソッドを2回呼び出すことに気付きました。ユーザーがクリックすると（神秘的な）いくつかの不思議なイベントが再び呼び出されます。私はそれが範囲だと思う。$は部分を適用するが、確かではない。ここに私のコードスニペットです：

<div data-ng-click="addFile($event)"> 
    <span class="icon-small icon-add"></span> 
</div> 

角度JS：

scope.addFile = function (event) { 
    if (event.originalEvent == null || !(event.originalEvent instanceof MouseEvent)) { 
       return; 
    } 

    if (!hiddenInputElementNode) { 
     //inject the hidden HtmlInputFile element and bind to the click event 
     hiddenInputElementNode = angular.element(
     "<input accept='application/pdf,audio/*' type='file' class='hidden' multiple />"); 

     hiddenInputElementNode.insertAfter(event.target); 
    } 
    //bind to the inputElementNode change event 
    hiddenInputElementNode.bind('change', function() { 
     angular.forEach(hiddenInputElementNode[0].files, function (dataFile) { 
     scope.$apply(
       scope.selectedFiles.push({ 
       name: dataFile.name, 
       data: dataFile 
       })); 
     }); 
     this.value = null; 
     hiddenInputElementNode.unbind('change'); 
    }); 

    $timeout(function() { 
     if (!!hiddenInputElementNode) { 
     hiddenInputElementNode.click(); 
     } 
    }, 0, false); 
    }; 

でも奇妙this.value = nullが値を無効にしません！この1のためのあなたのjavascriptのコードを変更することで

Answer 1

試してみてください。

scope.addFile = function (event) { 
    if (event.target.tagName.toUpperCase() === "DIV") { 

     if (!hiddenInputElementNode) { 
      //inject the hidden HtmlInputFile element and bind to the click event 
      hiddenInputElementNode = angular.element(
      "<input accept='application/pdf,audio/*' type='file' class='hidden' multiple />"); 

      hiddenInputElementNode.insertAfter(event.target); 
     } 
     //bind to the inputElementNode change event 
     hiddenInputElementNode.bind('change', function() { 
      angular.forEach(hiddenInputElementNode[0].files, function (dataFile) { 
       scope.$apply(
         scope.selectedFiles.push({ 
          name: dataFile.name, 
          data: dataFile 
         })); 
      }); 
      this.value = null; 
      hiddenInputElementNode.unbind('change'); 
     }); 

     $timeout(function() { 
      if (!!hiddenInputElementNode) { 
       hiddenInputElementNode.click(); 
      } 
     }, 0, false); 
    } 
}; 

私は（私はあまりにもIEと同様の問題があった）イベントはdivの内側にあるため、スパンの二回解雇されているあなたは、クリックNGと信じています。