Как передать json из директивы контроллеру через угловой js

У меня есть требование показать данные excel для пользовательского интерфейса, для этого я использовал ui-сетку и смог показать данные excel в ui-grid. Но только одна информация о листе получает нагрузку в ui-сетке. Если я использую excel с несколькими листами, я хочу показать все имена листов в выпадающем меню в пользовательском интерфейсе и на основании выбранного листа должны быть заполнены данные, соответствующие этому листу. Я могу видеть данные в формате JSON форме в директиве используется, но я не в состоянии заполнить имена листов в раскрывающемся списке Это plunker за то, что было сделано ещеКак передать json из директивы контроллеру через угловой js

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

Это директива кода и контроллер код:

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; // Passed имен листов в области видимости переменных данные переменных = 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 я могу видеть все имена листов, но в выпадающем списке я получаю пустой DropDown

Это 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>

Просьба предложить, как я могу Прежде всего, я могу передать Json или объект из директивы в контроллер. Это было бы большой помощью.

источник

2016-11-21 Fatema Rangwala

Вам нужно пройти sheetNames varible в директиве. как вы проходите opts.

Я обновил plnkr проверить ниже

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

источник

2016-11-21 10:34:20 nmanikiran

Спасибо! Ваше решение сработало. Но есть ли способ передать объект рабочей книги контроллеру или сохранить его в службах, поскольку мне нужно показывать соответствующие данные листа в 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; 
    } 
}

источник

2016-11-21 10:22:24 trichetriche

Благодарим вас за помощь, можете ли вы показать мне, как это можно использовать при редактировании в плункере, оно попробовало ваше решение, но не смогло получить точный результат. Это плункер, который я использую http://plnkr.co/edit/9oU2dcOWtke8dt7PWSk6?p=preview. Было бы очень полезно с вашей стороны –

Я разветвил его, см. Http://plnkr.co/edit/aLHAAjiEuk27c8zxe5YU?p=preview – trichetriche

TypeError: Невозможно прочитать свойство 'setData' of undefined at app.js: 33 в поле Scope. $ eval (angular.js: 14547) at Scope. $ apply (angular.js: 14646) at FileReader.reader.onload (app.js: 28) Получение этой ошибки при запуске плунжера –

Я думаю, что ваш контроллер не знает об изменениях вы сделали.

Вы вызываете $ scope.apply, но это только получает директиву для обновления своих значений?

Попробуйте присвоить $ scope. $ Root. $ Apply(). Это фиксировало проблему в этом случае, но я не уверен, что это хороший шаблон.

источник

2016-11-21 10:35:12 Edub

Как передать json из директивы контроллеру через угловой js

ответ

Смежные вопросы