私はデータを非同期でロードする場所を手元に用意していますが、これは私の例では3秒遅れてシミュレーションされます。ngHandsontable：データソースの非同期読み込みとバインディングが角度なしで動作しない
これは、settings="ctrl.settings"テーブルです：
<hot-table col-headers="true" settings="ctrl.settings">
<hot-column data="id" title="'ID'" read-only></hot-column>
<hot-column data="name.first" title="'First Name'"></hot-column>
<hot-column data="name.last" title="'Last Name'"></hot-column>
<hot-column data="address" title="'Address'"></hot-column>
<hot-column data="price" title="'Price'" type="'numeric'" 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>
、あなたは私がこのdata: _this.delayedData,ようなデータソースを設定することを見ることができ、このようなコントローラ、：
function MainCtrl(dataFactory) {
var _this = this;
_this.data = dataFactory.generateArrayOfObjects();
_this.delayedData = []; // this will be filled with a delay
this.settings = {
// data: _this.data,
data: _this.delayedData,
dataSchema: this.data
}
this.columns = [
{
data: 'id',
title: 'ID',
readOnly: true
},
{
data: 'price',
title: 'Price',
readOnly: false
}
];
// here the data is loaded with a delay of 3 seconds
// and the table is then rendered again
setTimeout(function(){
_this.delayedData = _this.data;
console.log('Setting delayed values ' + JSON.stringify(_this.delayedData));
// get instance of table and re-render
var hotDiv = angular.element($('hot-table'));
if (hotDiv!==undefined && hotDiv.isolateScope()!==undefined) {
var hotInstance = hotDiv.isolateScope().hotInstance;
if (hotInstance!==undefined) {
hotInstance.render();
console.log("=========================");
console.log('Rendered but not showing in the table! Why?');
console.log("=========================");
}
}
}, 3000);
}
JSビン： をhttp://jsbin.com/daniyov/edit?html,js,console,output
したがって、データがテーブルに定義された後に少し遅れてロードされていますontroller。ハンドレットドキュメントによれば、example of the documentationのように、データが変更されるたびにテーブルのrender（）メソッドを呼び出す必要があります。
"レンダー！"このコードは呼び出されますが、アイテムはテーブルに表示されません。
Angular/Angularディレクティブを使用しないで作成した同様の例は、次のようにうまく機能します。http://jsfiddle.net/mathiasconradt/L4z5pbgb/ Angular/ngHandsontableと同じように動作させることはできません。
===== UPDATEは=====
私はJSのビンで私のサンプル更新：http://jsbin.com/daniyov/edit?html,js,console,outputをし、いくつかのより多くのデバッグをしました。私が私のテーブルに割り当てるデータソースが本当に私が割り当てるオブジェクトへの参照を保持していないようだ
// here the data is loaded with a delay of 3 seconds
// and the table is then rendered again
setTimeout(function(){
_this.delayedData = _this.data; // assigning data here!
// get instance of table and re-render
var hotDiv = angular.element($('hot-table'));
if (hotDiv!==undefined && hotDiv.isolateScope()!==undefined) {
console.log("=========================");
console.log('DEBUG OUTPUT');
console.log("=========================");
console.log('Found table DOM element: ' + hotDiv.attr("id"));
var hotInstance = hotDiv.isolateScope().hotInstance;
if (hotInstance!==undefined) {
// let's see if the reference
console.log('Columns in this table: ' + hotInstance.countCols());
console.log('Rows in this table: ' + hotInstance.countRows());
console.log('Table source data length: ' + hotInstance.getSourceData().length);
console.log('delayedData length: ' + _this.delayedData.length);
console.log("=========================");
console.log('Why does delayedData have a length of ' + _this.delayedData.length);
console.log('and the table source data a length of ' + hotInstance.getSourceData().length);
console.log('if it IS the data source of the table?');
console.log("=========================");
hotInstance.render();
}
}
}, 3000);
：私は次のように私は、データ・ソースの遅延ロードをシミュレートする機能を更新しました。
2つのログ出力が異なる値を示しています
_this.delayedDataを介して設定された、私のテーブルのデータソースです、そして私の理解から、それを参照することによってバインドされていても：
this.settings = {
data: _this.delayedData
}