如何存储来自指令的 JSON 以通过角度在下一个 HTML 页面上使用它答案

【问题标题】：how to store the JSON from directive to use it on next HTML page through angular如何存储来自指令的 JSON 以通过角度在下一个 HTML 页面上使用它
【发布时间】：2017-01-25 20:10:46
【问题描述】：

我有一个要求，我需要从任何位置读取 excel 文件并在下一个 html 页面上呈现 excel 的数据。我能够在同一页面上使用多张工作表呈现 excel 数据，但现在我需要在第一页上选择文件并在下一个 html 页面上呈现其数据。像这样：

在下一个屏幕上需要显示 excel 数据：

在工作表名称中，我需要提供来自 excel 的工作表名称，并选择需要在网格中加载工作表数据的任何工作表名称。我使用了两个 div 将页面垂直分成两列。

我能够在单个页面上实现此功能，但现在我需要将此代码分成多个页面。这是完成的工作的 plunker： http://plnkr.co/edit/xHEtxtzKrEiKDTrqlafC?p=preview

这是我的 js 代码：

angular.module('app', ['ui.grid'])

.controller('MainCtrl', ['$scope', function($scope) {
  var vm = this;

  vm.gridOptions = {};

  vm.reset = reset;
  vm.selectedSheet = '';
  vm.sheetIndex = 0;


  function reset() {
    vm.gridOptions.data = [];
    vm.gridOptions.columnDefs = [];
    vm.selectedSheet = '';
    vm.sheetIndex = 0;
  }

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


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

    vm.sheetNames = workbook.SheetNames; 
    var data = XLSX.utils.sheet_to_json(workbook.Sheets[workbook.SheetNames[vm.sheetIndex]]);

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

    vm.gridOptions.data = data;
  };

  vm.onLoadData = function(data) {
    vm.data = vm.data || data;
    vm.readSheet();
  };

  vm.sheetChange = function() {
    vm.sheetIndex = vm.sheetNames.indexOf(vm.selectedSheet);
    vm.readSheet();
  };

}])

.directive("fileread", [function() {
  return {
    scope: {
      onLoadData: '&'

    },
    link: function($scope, $elm, $attrs) {
      $elm.on('change', function(changeEvent) {
        var reader = new FileReader();

        reader.onload = function(evt) {
          $scope.$apply(function() {


            $scope.onLoadData({
              data: evt.target.result
            });

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

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

HTML 代码：

<!DOCTYPE html>
<html ng-app="app">

  <head>
    <link data-require="bootstrap-css@*" data-semver="3.3.1" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" />
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.16/angular.js"></script>
    <script src="https://cdn.rawgit.com/SheetJS/js-xlsx/v0.8.0/dist/xlsx.full.min.js"></script>
    <script src="https://cdn.rawgit.com/SheetJS/js-xlsx/v0.8.0/dist/ods.js"></script>
    <script src="http://cdn.rawgit.com/angular-ui/ui-grid.info/gh-pages/release/3.0.0-rc.22/ui-grid.min.js"></script>
    <link rel="stylesheet" href="http://cdn.rawgit.com/angular-ui/ui-grid.info/gh-pages/release/3.0.0-rc.22/ui-grid.min.css" />
    <link rel="stylesheet" href="main.css" type="text/css" />
  </head>

  <body>
    <div ng-controller="MainCtrl as vm">
      <button type="button" class="btn btn-success" ng-click="vm.reset()">Reset Grid</button>
      <br />
      <br />
      <div id="grid1" ui-grid="vm.gridOptions" class="grid">
        <div class="grid-msg-overlay" ng-show="!vm.gridOptions.data.length">
          <div class="msg">
            <div class="center">
              <span class="muted">Select Spreadsheet File</span>
              <br />
              <input type="file" accept=".xls,.xlsx,.ods"  multiple="true"  fileread="" on-load-data="vm.onLoadData(data)"/>
            </div>
          </div>
        </div>
         <div>
        <select ng-model="vm.selectedSheet" ng-options="names as names for names in vm.sheetNames" 
        ng-change="vm.sheetChange()"></select>
        {{vm.selectedSheet}}
    </div>
      </div>
    </div>

    <script src="app.js"></script>
  </body>

</html>

我认为我需要将此 JSON 存储在某个地方，以便稍后在不同页面中使用它。我应该使用服务来实现此功能还是需要使用任何其他方法，请提出建议。

【问题讨论】：

标签： html angularjs json github

【解决方案1】：

我希望这可能会有所帮助！您可以将 Json 数据存储到任何 rootScope 变量中以在其他控制器中使用。

例如：

你有以下代码；

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


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

vm.sheetNames = workbook.SheetNames; 
var data = XLSX.utils.sheet_to_json(workbook.Sheets[workbook.SheetNames[vm.sheetIndex]]);

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

vm.gridOptions.data = data;
};

在这里

 vm.gridOptions.data = data;

您可以将数据设置和存储为 JSON 数组供以后使用；

 $rootScope.gridOptionsData = data;

【讨论】：