罚款上传与angularjs指令错误

Question

我正在实施IE9的文件上传库（虽然我一直在每个浏览器测试），但我无法克服这个错误。

TypeError: element.getElementsByTagName is not a function (line 134)

candidates = element.getElementsByTagName("*");

这里是我的HTML：

 <div type="text/template" id="qq-template-manual-trigger" style="display:none;"> 
     <div class="qq-uploader-selector qq-uploader" qq-drop-area-text="Drop files here"> 
     <div class="qq-total-progress-bar-container-selector qq-total-progress-bar-container"> 
     <div role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" class="qq-total-progress-bar-selector qq-progress-bar qq-total-progress-bar"></div> 
     </div> 
     <div class="qq-upload-drop-area-selector qq-upload-drop-area" qq-hide-dropzone> 
      <span class="qq-upload-drop-area-text-selector"></span> 
     </div> 
     <div class="qq-upload-button-selector qq-upload-button"> 
      <div>Upload a file</div> 
     </div> 
     <div class="buttons"> 
      <div class="qq-upload-button-selector qq-upload-button"> 
       <div>Select files</div> 
      </div> 
      <button type="button" id="trigger-upload" class="btn btn-primary"> 
       <i class="icon-upload icon-white"></i> Upload 
      </button> 
     </div> 
     <span class="qq-drop-processing-selector qq-drop-processing"> 
      <span>Processing dropped files...</span> 
      <span class="qq-drop-processing-spinner-selector qq-drop-processing-spinner"></span> 
     </span> 
     <ul class="qq-upload-list-selector qq-upload-list" aria-live="polite" aria-relevant="additions removals"> 
     <li>         
      <div class="qq-progress-bar-container-selector"> 
      <div role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" class="qq-progress-bar-selector qq-progress-bar"></div> 
       </div> 
      <span class="qq-upload-spinner-selector qq-upload-spinner"></span> 
      <span class="qq-upload-file-selector qq-upload-file"></span> 
      <span class="qq-edit-filename-icon-selector qq-edit-filename-icon" aria-label="Edit filename"></span> 
      <input class="qq-edit-filename-selector qq-edit-filename" tabindex="0" type="text"> 
      <span class="qq-upload-size-selector qq-upload-size"></span> 
      <button type="button" class="qq-btn qq-upload-cancel-selector qq-upload-cancel">Cancel</button> 
      <button type="button" class="qq-btn qq-upload-retry-selector qq-upload-retry">Retry</button> 
      <button type="button" class="qq-btn qq-upload-delete-selector qq-upload-delete">Delete</button> 
      <span role="status" class="qq-upload-status-text-selector qq-upload-status-text"></span> 
     </li> 
     </ul> 
    </div> 
    </div> 
    <div id="fine-uploader-manual-trigger"></div> 
    <div fine-uploader 
     upload-server="/path/to/server" 
     uploaded-files-model="files"           
     allowed-extensions="arrayOfFiles"></div> 

角指令

angular.module("myApp").directive('fineUploader'), function(){ 
    return{ 
     restrict: "A", 
    scope: { 
     uploadedFilesModel: '=' 
    }, 

    link: function ($scope, element, attrs) { 
    $scope.uploader = new qq.FineUploader({ 
      debug: true, 
      element: document.getElementById('fine-uploader-manual-trigger'), 
      // element: element[0], 
      multiple: false, 
      text:{ 
       uploadbutton: '<i class="icon-upload icon-white"></i> upload file' 
      }, 
      template: document.getElementById('qq-template-manual-trigger'), 
      request: { 
       endpoint: attrs.endpoint, 
       customHeaders: { 
        "AuthorizationToken": localStorage.token 
       } 
      }, 
      validation: { 

       allowedExtensions: allowedExtensions 
       sizeLimit: sizeLimit 
      }, 
      classes: { 
       success: 'alert alert-success', 
       fail: 'alert alert-error' 
      }, 
      callbacks: {      
       onComplete: function (id, fileName, response) { 
        if (response.success) { 
         $scope.uploadedFilesModel = response; 
         $scope.$apply(); 
         $('li.alert-success').delay(500).fadeOut('slow',     function() { 
          $(this).remove(); 
         }); 
        } 
       } 
      } 
    } 
    }; 

我如何能实现使用IE9 angularjs指令细上传？

错误调用堆栈

Object.getByClass 
Object.getFirstByClass 
getTemplateEl 
addFile 
addToList 
onSubmit 
_onSubmitCallbackSuccess 
Object.qq.bind [as onSuccess] 
_handleCheckedCallback 
_upload 
(anonymous function) 
then 
_onValidateCallbackSuccess 
qq.bind 
_handleCheckedCallback 
_onValidateBatchCallbackSuccess 
qq.bind 
_handleCheckedCallback 
_prepareItemsForUpload @ fine-uploader.js:3181 
_prepareItemsForUpload @ fine-uploader.js:6498 
addFiles 
_onInputChange 
onChange 
(anonymous function) 

Answer 1

它看起来就像你在你的模板有一个注释节点的地方。一个快速的解决方法是消除这个评论节点。请确保提交Fine Uploader的错误，因为遍历元素的代码可能不会像这样在注释节点上失败。