如何通过角js从指令传递json到控制器

问题描述：

我需要显示UI上的excel数据，为此我使用了ui-grid并能够在ui-grid中显示excel数据。但是只有一个工作表数据以ui-grid方式加载。如果我使用具有多个工作表的Excel，我希望在用户界面的下拉菜单中显示所有工作表名称，并根据所选工作表的相应数据填写相应的数据。我能看到在该指令中JSON形式的数据被使用，但我不能够在下拉填充表名称这是什么已经完成尚未如何通过角js从指令传递json到控制器

http://plnkr.co/edit/9oU2dcOWtke8dt7PWSk6?p=preview

这是plunker该指令代码和控制器代码：

angular.module（ '应用'，[ 'ui.grid']）

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

    vm.gridOptions = {}; 

    vm.reset = reset; 
    //I want to use that JSON in controller so that i can show the values in grid 
    function reset() { 
    vm.gridOptions.data = []; 
    vm.gridOptions.columnDefs = []; 
    } 
}]) 

directive("fileread", [function() { 
    return { 
    scope: { 
     opts: '=' 
    }, 
    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]; 
      //I get all the sheet names of excel through workbook.SheetNames, I want to show this sheet names in dropdown and on basis 
      //of the sheet selected it should load data of that sheet in the ui-grid, workbook.Sheets consists of data of all the Sheets present in Excel

$ scope.sheetName = workbook.SheetNames; //传递片材名称范围可变 VAR数据= XLSX.utils.sheet_to_json（workbook.Sheets [workbook.SheetNames [0]]）;

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

      $scope.opts.data = data; 

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

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

在sheetNames我能看到所有的工作表名称，但在下拉列表中得到了一个空白的下拉

这是HTML：

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

    <head> 
    <link data-require="[email protected]*" 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" fileread="" opts="vm.gridOptions" multiple="true" /> 
      </div> 
      </div> 
     </div> 
      <select ng-model="names" ng-options="names as names for names in sheetName"></select> 
    <pre> 
     {{sheetNames | json}} 
    </pre><!-- Dropdown is coming blank--> 
    </div> 
     </div> 
    </div> 
    <script src="app.js"></script> 
    </body> 

</html>

请建议我怎么能achi前夕的要求，我怎么能通过Json或对象从指令到控制器。这将是一个很大的帮助。

答

您需要通过sheetNames varible到指令。比如你如何通过opts。

我更新了plnkr检查以下

http://plnkr.co/edit/RQJW1D6iYjZmMEeSedCU?p=preview

谢谢！您的解决方案奏效但是有没有什么办法可以将工作簿对象传递给控制器，或者可以将其存储在服务器中，因为只要选择了任何工作表名称，就需要在ui-grid上显示相应的工作表数据。所以需要临时存储工作簿对象，以便我可以轻松地从其他页面获取数据。请建议 –

更新的代码http://plnkr.co/edit/Ixwm3d5xARepuOEnWAUd?p=preview – nmanikiran

这就是我正在努力实现的目标。非常感谢您的帮助。 :) –

答

我脑海中浮现的唯一想法是使用服务来做到这一点。即使它是最简单的，只需给它一个属性和一个get/setter，并且你应该能够将你的数据从指令发送到你的控制器（当然，假设你在两个组件中注入了它的依赖）。

那就是：

angular 
    .module('app') 
    .factory('dataExchanger', dataExchanger); 

dataExchanger.$inject = ['dependencies']; 

/* @ngInject */ 
function dataExchanger(dependencies) { 

    var data = {}; 

    var service = { 
     getData: getData, 
     setData: setData 
    }; 
    return service; 
    //////////////// 
    function getData() { 
     return data; 
    } 

    function setData(param) { 
     data = param; 
    } 
}

谢谢你的帮助，你能告诉我这是如何通过在plunker中编辑使用，它试图解决你的问题，但不能得到确切的结果。这是我使用的plunker http://plnkr.co/edit/9oU2dcOWtke8dt7PWSk6?p=preview。这将是一个很大的帮助，从你身边 –

我分叉它，请参阅http://plnkr.co/edit/aLHAAjiEuk27c8zxe5YU?p=preview – trichetriche

TypeError：无法读取属性'setData'undefined 在app.js：33 $ scope（angular.js：14547） at Scope。$ apply（angular.js：14646） at FileReader.reader.onload（app.js：28）获取此错误，同时运行plunker –

答

我觉得你的控制器不知道你所做的改变。

您正在调用$ scope.apply，但这只会得到指令来更新它的值？尝试调用$ scope。$ root。$ apply（）。这解决了这个问题，但我不确定这是否是一个好的模式。

如何通过角js从指令传递json到控制器

相关推荐