AngularJS Issue with custom directive to upload excel

Question

I am using ng-admin and I created a custom directive(following this example http://plnkr.co/edit/rYC3nd7undqJz2mr8Old) to upload a excel sheet, when I upload the file, I get the following TypeError: Cannot set property 'columnDefs' of undefined, my code

Module:

var myApp = angular.module('myApp', ['ng-  admin','ngStorage','chart.js','ui.grid']);

Controller

myApp.controller('MainCtrl', ['$scope', function ($scope) {

var vm = this;

vm.gridOptions = {};

vm.reset = reset;


function reset() {

  vm.gridOptions.data = [];
  vm.gridOptions.columnDefs = [];
 }
 }]);

Directive:

 myApp.directive('fileread', ['$http', function ($http) {


 return {
 restrict: 'E',
 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];

       var datasheet = XLSX.utils.sheet_to_json( workbook.Sheets[workbook.SheetNames[0]]);

       console.log(datasheet);


       $scope.opts.columnDefs = [];

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

       $scope.opts.data = datasheet;
       var json_string = JSON.stringify($scope.opts.data);
       console.log(json_string);

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

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










 }, template:
  '<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="false" />'+
        '</div>'+
      '</div>'+
    '</div>'+
  '</div>'+
  '</div>'



  }

  }]);

Template from I am calling the directive

var customDashboardTemplate =
'<div class="row dashboard-starter"></div>' +
'<question-stats></question-stats>'+
'<div ng-controller="MainCtrl" >'+
'<fileread>'+
'<button type="button" class="btn btn-success" ng-click="reset()">Reset Grid</button>'+
  '<br />'+
  '<br />'+
  '<div id="grid1" ui-grid="gridOptions" class="grid">'+
  '<div class="grid-msg-overlay" ng-show="!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="gridOptions" multiple="false" />'+
      '</div>'+
    '</div>'+
  '</div>'+
 '</div>'+
 '</fileread>'+
 '</div>'+
 '<div class="row dashboard-content">' +
 '<div class="col-md-6">' +
     '<div class="panel panel-green">' +
         '<ma-dashboard-panel collection="dashboardController.collections.last_users" entries="dashboardController.entries.last_users" datastore="dashboardController.datastore"></ma-dashboard-panel>' +
     '</div>' +
  '</div>'+

   '<div class="col-md-6">' +
     '<div class="panel panel-yellow">' +
         '<ma-dashboard-panel collection="dashboardController.collections.last_tips" entries="dashboardController.entries.last_tips" datastore="dashboardController.datastore"></ma-dashboard-panel>' +
      '</div>' +
   '</div>'+
 '</div>'+
'</div>'
 ;

Rafael Antonio Pólit · Answer 1 · 2015-12-30T00:29:49.563

0

It may just be the space inside the template separating the ng-click calling the reset function:

(ng- click)

With that space you are not calling the reset therefore not actually assigning the defaults?

Edit: You are calling the directive within the directive within the directive's template. This seems fishy. Can we see the HTML implementation of where you are calling the directive?

edited Dec 30 '15 at 00:29

answered Dec 29 '15 at 23:29

Rafael Antonio Pólit

175
1
10

This space was created when I pasted the code here, in my code is fine, I going to try fix this space in the post. – Armi Ortiz Dec 29 '15 at 23:41
I edited my post. You are calling the directive within the template of the directive. That really does not seem right. – Rafael Antonio Pólit Dec 30 '15 at 00:30
I am calling the directive in another template (dashboard template) – Armi Ortiz Dec 30 '15 at 01:22
I don't know if you ever solved this. but i had the same problem and the issue was that in my controller i defined gridOptions as vm.gridOptions, and in my file input html i accidentally just called it ` opts="gridOptions" ` instead of `vm.` – IWI Oct 31 '16 at 13:44

AngularJS Issue with custom directive to upload excel

1 Answers1