Fatal编程技术网
  • javascript/
  • Javascript 如何通过angular js将json从指令传递到控制器

Javascript 如何通过angular js将json从指令传递到控制器

javascript angularjs json github

Javascript 如何通过angular js将json从指令传递到控制器,javascript,angularjs,json,github,Javascript,Angularjs,Json,Github,我需要在UI上显示excel数据，为此，我使用了UI网格，并且能够在UI网格中显示excel数据。 但只有一个工作表数据在ui网格中得到加载。 如果我使用的excel有多个工作表，我希望在UI的下拉列表中显示所有工作表名称，并根据所选工作表填充该工作表的相应数据。 我能够在正在使用的指令中看到JSON格式的数据，但无法在下拉列表中填充工作表名称 这是对已经做过的事情的抨击 这是指令代码和控制器代码： 角度.module（'app'，['ui.grid']）） //我想将工作簿对象传递给控制器，

我需要在UI上显示excel数据，为此，我使用了UI网格，并且能够在UI网格中显示excel数据。 但只有一个工作表数据在ui网格中得到加载。 如果我使用的excel有多个工作表，我希望在UI的下拉列表中显示所有工作表名称，并根据所选工作表填充该工作表的相应数据。 我能够在正在使用的指令中看到JSON格式的数据，但无法在下拉列表中填充工作表名称 这是对已经做过的事情的抨击

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

角度.module（'app'，['ui.grid']））

//我想将工作簿对象传递给控制器，因为它包含所有必需的数据

            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 data=XLSX.utils.sheet_to_json（workbook.Sheets[workbook.SheetNames[0]]）

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

这是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" 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>


重设网格




选择电子表格文件


{{sheetNames | json}}
请建议我如何实现要求，如何将Json或对象从指令传递给控制器。这将是一个很大的帮助。

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

这是：

http://plnkr.co/edit/RQJW1D6iYjZmMEeSedCU?p=preview
您需要将
sheetNames
变量传递到指令。比如你如何通过
选择

我更新了plnkr检查如下


我想你的控制员没有意识到你所做的改变

您正在调用$scope.apply，但这只获取更新其值的指令


尝试调用$scope.$root.$apply（）。这解决了本例中的问题，但我不确定这是否是一个好的模式。
谢谢您的帮助，您可以告诉我如何通过在plunker中编辑来使用此模式，它尝试了您的解决方案，但无法获得准确的结果。这是我正在使用的plunker。这将是一个很大的帮助，我分叉了它，请参阅TypeError:无法读取未定义的属性'setData'，在app.js:33在Scope.$eval（angular.js:14547）在Scope.$apply（angular.js:14646）在FileReader.reader.onload（app.js:28）获取此错误，在运行plunkerand时，我的错误是
错误：未定义数据
，这几乎相同。错误来自您的指令，该指令使用
链接
，并且没有控制器。您需要在指令中添加控制器才能使其正常工作。谢谢！！你的解决方案奏效了。但是，有什么方法可以将工作簿对象传递给controller，或者将其存储在服务中，因为每当选择任何sheetname时，我都需要在ui网格上显示相应的工作表数据。所以我需要暂时存储工作簿对象，这样我就可以轻松地从那里获取数据，也可以在其他页面上获取数据。请暗示这正是我想要实现的。。非常感谢您的帮助。！！：）

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



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



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