Angular 材料和 Handsontable答案

【问题标题】：Angular Material and HandsontableAngular 材料和 Handsontable
【发布时间】：2016-11-22 07:48:57
【问题描述】：

我正在尝试将 handsontable 与 angular 和 ngHandsontable 一起使用。似乎有一个奇怪的交互，当对话框第一次出现时我只看到第一列

然后当我选择这些单元格之一时：

最后，当一行中的一个项目发生变化时，我得到了我所追求的格式：

有没有人见过类似的东西，我能做些什么来绕过这个破解 Handsontable 的 css 的形式吗？

js:

// ngHandsontable
vm.minSpareRows = 1;
vm.rowHeaders = false;
vm.db = { items: items };
vm.settings = {
    colHeaders: true,
    contextMenu: ['row_above', 'row_below', 'remove_row']          
};

// overflow ellipsis from js
vm.myCustomRenderer = function (hotInstance, td, row, col, prop, value, cellProperties) {
    var MAX_LENGTH = 4;

    if ((value + '').length > MAX_LENGTH) {
        value = value.substr(0, MAX_LENGTH) + '...';
    }
    td.innerHTML = value;
}

html:

 <hot-table settings="vm.settings"
                           row-headers="vm.rowHeaders"
                           min-spare-rows="vm.minSpareRows"
                           datarows="vm.db.items">
                    <hot-column data="id" title="'ID'"></hot-column>
                    <hot-column data="name.first" title="'First Name'" type="'text'" read-only></hot-column>
                    <hot-column data="name.last" title="'Last Name'" read-only></hot-column>
                    <hot-column data="address" title="'Address'" width="150"></hot-column>
                    <hot-column data="product.description" title="'Favorite food'" type="'autocomplete'">
                        <hot-autocomplete datarows="description in product.options"></hot-autocomplete>
                    </hot-column>
                    <hot-column data="price" title="'Price'" type="'numeric'" width="80" format="'$ 0,0.00'"></hot-column>
                    <hot-column data="isActive" title="'Is active'" type="'checkbox'" checked-template="'Yes'"
                                unchecked-template="'No'"></hot-column>
                </hot-table>

【问题讨论】：

单击单元格或行中的项目是否会填充对象，例如通过 http 调用？
@camden_kid 我不知道，数据是一个简单的静态块，我还没有实现任何回调。我将在上面进行编辑以显示我使用的代码块。
在您的md-dialog 参数中，您是否将preserveScope 设置为true？
@camden_kid 不，我将一个控制器传递给 md 对话框：控制器：'clientModalController'，controllerAs：'vm'，并传递一些本地人。
我已经创建了一个测试 - codepen.io/camden-kid/pen/oLEPpa（我之前从未使用过handsontable，对我如此赤裸裸）。此示例使用 ngHandsontable 示例 - github.com/handsontable/ngHandsontable。我注意到它的行为方式与您的代码类似，并且不在 md-dialog 中。

标签： angularjs angular-material handsontable

【解决方案1】：

如果你解开 md-content 的 hansontable，你可以解决这个问题，我不知道创建表时 hansontable 计算会发生什么，但是 md-content 指令会添加一个导致奇怪行为的溢出

【讨论】：