angularjs - 如何使用 Angular 数据表呈现具有模型绑定(bind)的列？

Question

有没有办法使用 DTColumnBuilder 在文本框中呈现带有模型绑定(bind)的列？

就像是:

DTColumnBuilder.newColumn('ColumnName').withTitle('Column Name').renderWith(function (data) {
   return '<input type="text" ng-model="ColumnName" />';
}),

Answer 1

有同样的问题，这是我的解决方案:

为 dtInstance

注册回调

在 DataTable 中的“draw.dt”上 $compile 相关 html 与 Angular

换句话说:

HTML:

<table datatable=""
       dt-options="vm.dtOptions"
       dt-columns="vm.dtColumns"
       dt-instance="vm.dtInstanceCallback"
       class="table table-bordered table-condensed">
</table>

JS:

renderWith(function(data, type, full) {
    return `<a class="ng-scope"><span ng-click='vm.remove("${data}")' class='fa fa-times-circle'></span></a>`
});
...
vm.dtInstanceCallback = (dtInstance) => {
    vm.dtInstance = dtInstance;
    dtInstance.DataTable.on('draw.dt', () => {
        let elements = angular.element("#" + dtInstance.id + " .ng-scope");
        angular.forEach(elements, (element) => {
            $compile(element)($scope)
        })
    });
}

我最小化了元素的选择，以优化性能，也许不需要。到目前为止，在 Chrome 和 Safari 中进行了测试，在两者中都可以使用