如何將json數據加載到handsontable中

Question

我使用sheetJs從指令中的csv/xls文件中獲取json數據。

myApp.directive("fileRead", [function() { 
    return { 
     scope: { 
      data: '=' 
     }, 
     link: function ($scope, $elm, $attrs) { 
      $elm.on('change', function (changeEvent) { 
       var reader = new FileReader(); 

       reader.onload = function (evt) { 
        $scope.$apply(function() { 
         var data = evt.target.result; 

         var workbook = XLSX.read(data, {type: 'binary'}); 

         var headerNames = XLSX.utils.sheet_to_json(
           workbook.Sheets[workbook.SheetNames[0]], 
           {header: 1} 
         )[0]; 

         console.log("headerNames: ", headerNames); 

         var data = XLSX.utils.sheet_to_json(workbook.Sheets[workbook.SheetNames[0]]); 

         console.log("sheet2Json: " , data); 

         $scope.columnDefs = []; 
         headerNames.forEach(function (h) { 
          $scope.columnDefs.push({field: h}); 
         }); 

         $scope.data = data; 
         console.log("file 4: " , data);        

         $elm.val(null); 
        }); 
       }; 

       reader.readAsBinaryString(changeEvent.target.files[0]); 
      }); 
     } 
    }; 
}]); 

作爲json檢索的數據是$scope.data = data;對象。我有一個單獨的js文件中像這樣我的樣品handsontable：

var myData = [ 
    ["KK", 1234567890, "k.k999@gmail.com", "kvp@gmail.com"], 
    ["KK", 1234567890, "k.k999@gmail.com", "kvp@gmail.com"], 
    ["KK", 1234567890, "k.k999@gmail.com", "kvp@gmail.com"], 
], 
     container = document.querySelector('#exampleGrid'); 

var hot = new Handsontable(container, { 
    data: myData, 
    startRows: 5, 
    startCols: 5, 
    minSpareCols: 0, 
    //always keep at least 1 spare row at the right 
    minSpareRows: 0, 
    //always keep at least 1 spare row at the bottom, 
    rowHeaders: true, 
    colHeaders: ['Name', 'Mobile number', 'Sender Email', 'Receiver Email'], 
    contextMenu: true, 
    width: 120, 
    wordWrap: true 
}); 

望着Handsontable文檔，我看到一個方法來加載JSON數據：

hot.loadData(data.data); 

現在我該怎麼辦加載scope.data （jsondata）轉換爲上述方法，它位於一個單獨的js文件中。我是否必須創建控制器並將數據傳遞給控制器​​範圍？

HTML：

<div class="top-big-link"> 
    <file-read> 
     <input id="csvFile" type="file" name="image" accept=".xls, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel" title=" "/> 
     <button id="csvFileImport" class="ImportFromExcelButton"><i class="fa fa-file-excel-o"> </i> Import from Excel</button> 
    </file-read> 
    <script> 
     document.getElementById('csvFileImport').addEventListener('click', function() { 
      document.getElementById('csvFile').click(); 

     }); 
    </script> 
</div> 

Answer 1

我不知道這是做的正確的方式，但它爲我工作。

得到了我的解決方案，從這個環節的工作：Passing values from directive to controller

由於@Thomas Weglinski

解決方案：

改變了我的指令，雙向綁定。

myApp.directive("fileRead", [function() { 
    return { 
     scope: { 
      fromDirectiveFn: '=method' 
     }, 
    }, 

    function link(scope, element, attrs){ 

     $scope.data = data; //Json data reecieved from csv/xls file 
     $scope.fromDirectiveFn($scope.data); 
    } 
} 

而改變我的HTML以下：

<file-read method="loadJson"> 
    <input id="csvFile" type="file" name="image" accept=".xls, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel" title=" "/> 
    <button id="csvFileImport" class="ImportFromExcelButton"><i class="fa fa-file-excel-o"> </i> Import from Excel</button> 
</file-read> 

此行method="loadJson調用內部控制器的功能和傳遞數據。