0

我正在使用 ng-admin 并创建了一个自定义指令（按照此示例http://plnkr.co/edit/rYC3nd7undqJz2mr8Old）上传一个 excel 表，当我上传文件时，我收到以下 TypeError：无法设置属性'未定义的 columnDefs'，我的代码

模块：

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

控制器

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

var vm = this;

vm.gridOptions = {};

vm.reset = reset;


function reset() {

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

指示：

 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>'



  }

  }]);

我正在调用指令的模板

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>'
 ;
4

1 回答 1

0

它可能只是模板内分隔 ng-click 调用重置函数的空间：

（ng-点击）

有了那个空间，您就没有调用重置，因此实际上没有分配默认值？

编辑：您在指令模板中的指令内调用指令。这似乎很可疑。我们能看到你调用指令的地方的 HTML 实现吗？

于 2015-12-29T23:29:21.873 回答