Question

我正在尝试使用AngularJS创建一个简单的应用程序。我正在尝试创建一个类似于电子表格功能的自定义拖动和调整大小功能（对于行和列）。我正在使用基本的handontable javascript函数并将其转换为angularjs。我不知道如何将普通的javascript代码转换为angularjs。我试过了，想弄明白我正在做的错误。任何理解相同的帮助都将非常感激。

由于

app.js

var MyApp=angular.module('app',[]);
MyApp.directive('resize',function($scope){
    restrict:'EA',
    link: function ($scope, element, attrs) { 

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

app.controller('scrollController', function($scope) {
    $scope.output = {};

})

的index.html

<!DOCTYPE html>
<html ng-app="drag">

  <head>

    <meta charset="utf-8" />
    <title>Handsontable in resizable div with angular</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.css">
    <link rel="stylesheet" href="style.css" />
    <script data-require="jquery" data-semver="2.0.3" src="http://code.jquery.com/jquery-2.0.3.min.js"></script>
    <script data-require="jqueryui" data-semver="1.10.0" src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.js"></script>
    <script data-require="angular.js@*" data-semver="1.2.6" src="http://code.angularjs.org/1.2.6/angular.js"></script>

    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-handsontable/0.10.2/jquery.handsontable.css" />
    <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-handsontable/0.10.2/jquery.handsontable.full.js" type="text/javascript"></script>

    <script src="app.js"></script>
  </head>

  <body>
  <div ng-controller="scrollController" >
  <div id="example1" class="hot handsontable" resize></div>

  </div>



  </body>

</html>

将javascript函数转换为handsons中的angularjs

0 个答案: