javascript - 使用 angularjs 指令时 Fine Uploader 出现错误

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 Directive(指令)

    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 指令实现fine-uploader？

错误调用堆栈

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 错误，因为遍历元素的代码可能不应该在这样的注释节点上失败。