instance.rootElement.getAttribute 不是函数

instance.rootElement.getAttribute is not a function

我正在尝试在应用程序中使用 handsontable 并对代码进行一些实验。我现在面临错误-"instance.rootElement.getAttribute is not a function"。当我检查它时，它出现在代码行

hot = new Handsontable（容器，{

我的index.html

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

<script type="text/javascript" src="https://docs.handsontable.com/0.16.1/scripts/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.5/angular.js"></script>
<script type="text/javascript"src="https://docs.handsontable.com/0.16.1/bower_components/handsontable/dist/handsontable.full.js"></script>
<script type="text/javascript" src="js/dragresize.js"></script>
<link type="text/css" rel="stylesheet" href="https://docs.handsontable.com/0.16.1/bower_components/handsontable/dist/handsontable.full.min.css">
</head>

<body >

<div id="example1" class="hot handsontable htRowHeaders htColumnHeaders" data-drag-resize></div>
</body>

</html>

我的dragresize.js

angular.module('myApp',[]).directive('dragResize',function(){
    return{
        restrict: 'AEC',
        replace:true,
        controller: function($scope, $timeout){
            //document.addEventListener("DOMContentLoaded", function() {

  var container = angular.element(document.getElementById('example1')),
    hot;

  hot = new Handsontable(container, {
    data: Handsontable.helper.createSpreadsheetData(200, 10),
    rowHeaders: true,
    colHeaders: true,
    colWidths: [55, 80, 80, 80, 80, 80, 80],
    rowHeights: [50, 40, 100],
    manualColumnResize: true,
    manualRowResize: true
  });

  function bindDumpButton() {
      if (typeof Handsontable === "undefined") {
        return;
      }

      Handsontable.Dom.addEvent(document.body, 'click', function (e) {

        var element = e.target || e.srcElement;

        if (element.nodeName == "BUTTON" && element.name == 'dump') {
          var name = element.getAttribute('data-dump');
          var instance = element.getAttribute('data-instance');
          var hot = window[instance];
          console.log('data of ' + name, hot.getData());
        }
      });
    }
  bindDumpButton();
    $timeout(dragResize,0);
//});
        }

    };
});

/* document.addEventListener("DOMContentLoaded", function() {

  var
    container = document.getElementById('example1'),
    hot;

  hot = new Handsontable(container, {
    data: Handsontable.helper.createSpreadsheetData(200, 10),
    rowHeaders: true,
    colHeaders: true,
    colWidths: [55, 80, 80, 80, 80, 80, 80],
    rowHeights: [50, 40, 100],
    manualColumnResize: true,
    manualRowResize: true
  });

  function bindDumpButton() {
      if (typeof Handsontable === "undefined") {
        return;
      }

      Handsontable.Dom.addEvent(document.body, 'click', function (e) {

        var element = e.target || e.srcElement;

        if (element.nodeName == "BUTTON" && element.name == 'dump') {
          var name = element.getAttribute('data-dump');
          var instance = element.getAttribute('data-instance');
          var hot = window[instance];
          console.log('data of ' + name, hot.getData());
        }
      });
    }
  bindDumpButton();
$timeout(container,0);
}); */

我不确定这个错误的确切含义。我正在尝试将现有的 javascript 文件整合到我的 angularjs 文件中。任何 information/help 将不胜感激

谢谢。

替换

container = angular.element(document.getElementById('example1'))

到

container = $document[0].getElementById('example1')

并将 $document 添加到您的函数参数中，就像

directive('dragResize', function($document) { ... }

希望这对您有所帮助。

向我询问更多问题。

谢谢。