angularjs 지시어를 사용하는 파인 업 로더에서 오류가 발생했습니다.

Question

IE9 용 파일 업로드 라이브러리를 구현 중이지만 모든 오류가 발생하지는 않습니다. 내가 IE9에서 AngularJS와 지시어를 사용하여 미세 업 로더를 구현할 수있는 방법

 <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(); 
         }); 
        } 
       } 
      } 
    } 
    }; 

: 여기

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

candidates = element.getElementsByTagName("*");

내 HTML입니까? 당신이 당신의 템플릿에 어딘가에 주석 노드를 가지고있는 것처럼

오류 호출 스택은

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

것 같습니다. 빠른 해결 방법은이 주석 노드를 제거하는 것입니다. 벌금 업 로더 버그도 신고하십시오. 요소를 통과하는 코드가 이와 같이 주석 노드에서 실패하지 않아야하기 때문입니다.