angular-datatables-ng-repeat не обновляет datatable новыми строками при вызове события $onChanges в компонентном контроллере

Я сделал компонент angular-datatable, который будет использоваться в моем проекте (используя angular 1.5), и привязал данные, которые он заполнен (angular way), к массиву объектов, который обновляется в родительской области. При изменении значения родительской области вызывается событие $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>

Я перепробовал почти все, что я видел в связанных вопросах о переполнении стека, но безрезультатно, и мне не повезло с переориентацией таблицы полностью с dtInstance. Любая помощь была бы очень признательна.

1 ответ

  1. v0.5.5 не позволяет ‘ $ ‘ char в имени переменной контроллера, которое, к сожалению, является значением по умолчанию в Angular Component. Переопределите его как обходной путь, например controllerAs: 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