Question

Я использую sheetJs, чтобы получить данные json из файла csv/xls в директиве.

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; объекта. У меня есть образец handsontable в отдельном файле JS, как это:

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 вызывает функцию внутри контроллера и передает данные.