angular-datatables

Question

我制作了一个 angular-datatable 组件用于我的项目（使用 angular 1.5）并绑定了填充它的数据（angular 方式) 到在父作用域中更新的对象数组。更改父范围值后，将调用 $onChanges 事件并更新绑定数据，但 table 中的行不会通过 ng-repeat 更改以反映更新——在 table 之后最初绘制，后续数据更改时看不到任何更改。这是我的代码：

JS:

angular.module('datatable').
component('datatable', {
  bindings: {
    graphData: '<',
    tableId: '=',
    divId: '='
  },
  templateUrl: 'components/graphs/datatable.template.html',
  controller: function datatableController (DTOptionsBuilder, DTColumnBuilder) {
        let self = this;
        self.tableKeys = Object.keys(self.graphData[0])

        self.$onChanges = function () {

            self.dtOptions = {
                paginationType: 'full_numbers',
                displayLength: 30,
                dom: 'Bfrtip',
                buttons: [
                    {extend: 'excelHtml5'},
                    'copy'
                ],
                scrollY: 450,
                scrollX: '100%',
                scrollCollapse: true,
            };
        };
    }
})

HTML（组件）：

<datatable graph-data="$ctrl.submittedResults" table-id="'allDataTableResults'" div-id="'allDataTable'"></datatable>

HTML（模板）：

<div class="col-md-10 col-md-offset-1">
    <div class="well well-lg" style="background: white">
        <div id="{{$ctrl.divId}}" style="width: 100%; height: 700px; display: block; margin: 0 auto">
            <table datatable="ng" dt-options="$ctrl.dtOptions"
            class="table table-striped table-bordered" cellspacing="0">
                <thead>
                    <tr>
                        <th ng-repeat="key in $ctrl.tableKeys">{{key}}</th>
                   </tr>
                </thead>
                <tbody>
                    <tr ng-repeat="row in $ctrl.graphData">
                        <td ng-repeat="val in row">{{val}}</td>
                    </tr>
                </tbody>
        </table>
    </div>
</div>

我已经尝试了我在 Stack Overflow 上的相关问题中看到的几乎所有内容，但都无济于事，而且我没有运气用 dtInstance 完全重新渲染 table。任何帮助将不胜感激。

Answer 1

v0.5.5 不允许在控制器变量名称中使用“$”字符，不幸的是，这是 Angular 组件中的默认值。覆盖它作为解决方法，例如控制器为：ctrl

https://github.com/l-lin/angular-datatables/blob/v0.5.5/dist/angular-datatables.js#L892

报告此问题：https://github.com/l-lin/angular-datatables/issues/916

angular-datatables - 在组件控制器中调用 $onChanges 事件时，ng-repeat 不会用新行更新数据表

angular-datatables - ng-repeat does not update datatable with new rows when $onChanges event called in component controller

datatable

angularjs

ng-repeat

angularjs-components