我已经将 Angular 2 添加到一个主要使用 jQuery + 插件构建的旧应用程序中。我正在尝试使用 jQuery DataTables在组件内部。我可以让它很好地加载表格。问题是我有一个包含 NG2 事件监听器的单元格模板。在 Angular 1 中,我可以使用 $compile 服务将它们注册到作用域,但那已经消失了。这是在代码中创建 DataTable 的方式,包括单元格模板:
$('#myTable').DataTable({
data: data,
columns: [
{
data: 'Dimension'
, render: function (data: any, type: any, obj: any, tbl: any) {
//return data;
var template =
`<div class="container-fluid">
<div class="row text-left" style="">
<div>
<div class="col-md-12">
<i class="glyphicon glyphicon-plus" (click)="showChildren()"></i>
${obj.Name}
<i class="glyphicon glyphicon-plus-sign" (click)="addNew()"></i>
</div>
</div>
</div>
</div>`;
return template;
}
}
]
});
});
(click) 事件监听器只是呈现为 html,什么都不做。我如何让它们工作?
最佳答案
您可以先将数据绑定(bind)项呈现为隐藏数据 block ,然后通过 jQuery 将它们与占位符模板匹配,如下所示:
HTML:
<div class="container-fluid source-data" attr.data-name="{{obj.Name}}"
*ngFor="obj in objArray; trackBy: obj.Name" style="display: none;">
<div class="row text-left" style="">
<div>
<div class="col-md-12">
<i class="glyphicon glyphicon-plus" (click)="showChildren()"></i>
{{obj.Name}}
<i class="glyphicon glyphicon-plus-sign" (click)="addNew()"></i>
</div>
</div>
</div>
Javascript:
// Initialize jQuery Data Table
$('#myTable').DataTable({
data: data,
columns: [{
data: 'Dimension',
render: function (data: any, type: any, obj: any, tbl: any) {
return `<div id="divTemplate${obj.Name}"></div>`;
}
}
]
});
// Transfer each DOM data block to the data table templates
$('.source-data[data-name]').each(function () {
var id = $(this).attr('data-name');
var html = $(this).attr('data-name').html();
$('#divTemplate' + id).html(html);
});
关于javascript - Angular2 和 jQuery 数据表,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40920282/