0
我有一個handontable，我加載數據異步，我在我的例子中延遲3秒模擬。ngHandsontable：異步加載的數據源和綁定不適用於Angular
這是表，其中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
所以數據被加載後有點延遲表定義在c ontroller。根據handsontable文檔，只要數據發生變化，就應調用表的render（）方法，如example of the documentation。
我確實看到了「渲染！」輸出在控制檯中，所以這段代碼確實被調用，但是這些項目並沒有出現在表格中。
我創建，但沒有角/角指令，做工精細這樣一個類似的例子：http://jsfiddle.net/mathiasconradt/L4z5pbgb/ 只是角/ 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);
看來，我分配給我的表中的數據源並沒有真正抱到我指定對象的引用。
兩個日誌輸出顯示不同的值：
即使_this.delayedData是我的表的數據源，並從我的理解，它是由基準約束，通過設置：
this.settings = {
data: _this.delayedData
}