Filepicker.io與Azure的Blob存儲 - 上傳錯誤

Question

這是一個按鈕我的NG-點擊代碼：

    $scope.pickFiles = function() { 
         var picker_options = { 
          container: 'modal', 
          mimetypes: ['*'], 
          multiple: true //from attr 
         }; 
         var store_options = { 
          location: 'Azure' 
         }; 
         window.filepicker.pickAndStore(picker_options, store_options, function (fpfiles) { 
          $scope.$apply(function() { 
           alert(fpfiles); 
          }), function (error) { 
           console.log(JSON.stringify(error)); 
          }; 
         }); 
        }; 

點擊按鈕後，模態正常出現，但是當我選擇文件我在紅色背景上收到「錯誤上傳文件....」消息。

當我點擊「上傳」在底部，這是在控制檯上的錯誤：我試圖與Azure的Blob存儲（配置它的開發者門戶

TypeError: Unable to set property 'id' of undefined or null reference 
    at Anonymous function (https://d2hbo3cbwd28c.cloudfront.net/0a45ade/v2/scripts/app.min.js:7:7517) 
    at a (https://d2hbo3cbwd28c.cloudfront.net/0a45ade/v2/scripts/vendor.min.js:1:795) 
    at h (https://d2hbo3cbwd28c.cloudfront.net/0a45ade/v2/scripts/app.min.js:7:7473) 
    at Anonymous function (https://d2hbo3cbwd28c.cloudfront.net/0a45ade/v2/scripts/app.min.js:7:7381) 
    at u (https://d2hbo3cbwd28c.cloudfront.net/0a45ade/v2/scripts/vendor.min.js:2:26212) 
    at Anonymous function (https://d2hbo3cbwd28c.cloudfront.net/0a45ade/v2/scripts/vendor.min.js:2:26394) 
    at p.prototype.$eval (https://d2hbo3cbwd28c.cloudfront.net/0a45ade/v2/scripts/vendor.min.js:3:1544) 
    at p.prototype.$digest (https://d2hbo3cbwd28c.cloudfront.net/0a45ade/v2/scripts/vendor.min.js:3:56) 
    at p.prototype.$apply (https://d2hbo3cbwd28c.cloudfront.net/0a45ade/v2/scripts/vendor.min.js:3:1820) 
    at a (https://d2hbo3cbwd28c.cloudfront.net/0a45ade/v2/scripts/vendor.min.js:2:9833) 

訪問鍵被設置）。它永遠不會進入功能（錯誤）功能。

任何提示？

更新：

我與小部件的嘗試：

<input type="filepicker" data-fp-apikey=".............." data-fp-mimetypes="*/*" data-fp-container="modal" data-fp-store-location="azure" onchange="alert(event.fpfile.url)"> 

而且它的工作原理，將文件上傳到Blob存儲，但只有當我把上面的HTML指揮它工作到頁。當它位於AngularJS指令模板中時 - 不會應用filepicker.io邏輯並顯示標準輸入。我想這是因爲該指令後來應用於DOM比filepicker.io小部件邏輯。

任何提示如何在AngularJS指令模板中使用小部件？

Answer 1

我能夠使小部件工作（但JavaScript API沒有成功），這是Angular指令鏈接函數的代碼片段，它將輸入元素從指令模板轉換爲filepicker按鈕：

（打字稿）

  var fPicker = (<any>window).filepicker; 
      var domElement = <HTMLInputElement>element.children().get(0); 
      domElement.setAttribute('data-fp-mimetype', 'image/*'); 
      domElement.setAttribute('data-fp-button-text', $scope.title); 
      domElement.onchange = (e) => { 
       alert(JSON.stringify((<any>e).fpfile)); 
      }; 
      fPicker.constructWidget(domElement);