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

【问题标题】：angular-datatables - ng-repeat does not update datatable with new rows when $onChanges event called in component controllerangular-datatables - 当在组件控制器中调用 $onChanges 事件时，ng-repeat 不会用新行更新数据表
【发布时间】：2017-03-15 03:23:25
【问题描述】：

我已经制作了一个 angular-datatable 组件以在我的项目中使用（使用 angular 1.5），并将其填充的数据（角度方式）绑定到在父范围内更新的对象数组。更改父范围值后，将调用 $onChanges 事件并更新绑定数据，但表中的行不会通过 ng-repeat 更改以反映更新——在最初绘制表后，不能进行任何更改随后的数据变化可见。这是我的代码：

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 重新渲染表格。任何帮助将不胜感激。

【问题讨论】：

从这里提供的有限代码来看，预期和实际结果并不明显。如果您 edit 您的代码并提供显示正在发生的情况的 minimal reproducible example，您将更有可能收到问题的答案。

标签： angularjs datatable ng-repeat angular-datatables angularjs-components

【解决方案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

【讨论】：