在 ng-switch 中创建一个handsontable答案

【问题标题】：Create a handsontable in ng-switch在 ng-switch 中创建一个handsontable
【发布时间】：2017-05-19 21:23:54
【问题描述】：

我想在ng-switch 中使用handsontable：当我们选择handsontable 时，它会显示一个正常且可编辑的handsontable。

HTML：

<!DOCTYPE html>
<html>
<head>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
  <script src="https://docs.handsontable.com/pro/1.8.2/bower_components/handsontable-pro/dist/handsontable.full.min.js"></script>
  <link type="text/css" rel="stylesheet" href="https://docs.handsontable.com/pro/1.8.2/bower_components/handsontable-pro/dist/handsontable.full.min.css">
</head>
<body ng-app="">
  <select ng-model="myVar">
    <option value="dogs">Dogs
    <option value="handsontable">handsontable
  </select>

  <div ng-switch="myVar">
    <div ng-switch-when="dogs">
     <p>Welcome to a world of dogs.</p>
    </div>
    <div ng-switch-when="handsontable">
      <div id="example1" class="hot handsontable htRowHeaders htColumnHeaders"></div>
    </div>
  </div>
</body>
</html>

JavaScript：

var example1 = document.getElementById('example1');
var settings1 = { data: [['A1', 'B1'], ['A2', 'B2']] };
var hot1 = new Handsontable(example1, settings1);

与this working example 不同，表格中的单元格不可编辑。所以我想知道是否缺少一些东西。例如，在工作示例中，表的创建由document.addEventListener("DOMContentLoaded", function() { ... }) 包装，我是否应该在此示例中包装javascript 代码以确保仅在ng-switch 到handsontable 后才创建表？

【问题讨论】：

看看ngHandsontable。

标签： angularjs handsontable

【解决方案1】：

所以正如@Mistailis 建议的那样，我们可以使用ngHandsontable。

JSBin

HTML：

<!DOCTYPE html>
<html>
<head>
  <base href="http://handsontable.github.io/ngHandsontable/node_modules/">
  <link rel="stylesheet" href="handsontable/dist/handsontable.full.css">
  <script src="angular/angular.js"></script>
  <script src="handsontable/dist/handsontable.full.js"></script>
  <script src="../dist/ngHandsontable.js"></script>
</head>
<body ng-app="app">
  <select ng-model="myVar">
    <option value="dogs">Dogs
    <option value="handsontable">handsontable
  </select>

  <div ng-switch="myVar">
    <div ng-switch-when="dogs">
     <p>Welcome to a world of dogs.</p>
    </div>
    <div ng-switch-when="handsontable">
      <div ng-controller="MainCtrl as ctrl">
        <hot-table datarows="ctrl.db.items"></hot-table>
      </div>
    </div>
  </div>
</body>
</html>

JavaScript：

function dataFactory () { };
dataFactory.$inject = [];
angular.module('ngHandsontable').service('dataFactory', dataFactory);

function MainCtrl(dataFctory) {
  this.db = { items: [[5, 6], [7, 8]] };
}
MainCtrl.$inject = ['dataFactory'];

angular
  .module('app', ['ngHandsontable'])
  .controller('MainCtrl', MainCtrl);

【讨论】：