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;オブジェクトです。今、私はscope.dataをロード行う方法

hot.loadData(data.data); 

：私はJSONデータをロードする方法を参照してください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 
}); 

：私はこのような別のJSファイルに私のサンプルhandsontableを持っています（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

私は、これはそれを行うための正しい方法であるかわからないが、それは私のために働きました。

は、このリンクから作業私の解決策を手に入れた：@Thomas WeglinskiへPassing values from directive to controller

おかげ

ソリューション：

は、双方向の結合に私のディレクティブを変更しました。

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このライン。