Question

Ich benutze SheetJs, um JSON-Daten aus CSV/XLS-Datei in einer Direktive zu erhalten.

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

die Daten abgerufen, wie in json $scope.data = data; Objekt ist. Ich habe meine Probe handsontable in einer separaten js-Datei wie folgt:

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

an der Handsontable Dokumentation der Suche ich eine Methode, siehe json Daten zu laden:

hot.loadData(data.data); 

Nun, wie ich die scope.data laden tun (jsondata) in die obige Methode, die in einer separaten js-Datei ist. Muss ich einen Controller erstellen und die Daten an den Controller-Bereich übergeben?

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

Ich bin nicht sicher, ob dies der richtige Weg ist, es zu tun, aber es funktionierte für mich.

Habe meine Lösung von diesem Link arbeiten: Passing values from directive to controller

Dank @Thomas Weglinski

Lösung:

geändert meine Richtlinie Zwei-Wege-Bindung.

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

Und mein HTML wie folgt ändern:

<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> 

Diese Linie method="loadJson die Funktion innerhalb Controller ruft und die Daten übergibt.