0

I have made an angular-datatable component to be used in my project (using angular 1.5) and have bound the data it is populated with (the angular way) to an array of objects that gets updated in the parent scope. Upon changing the parent scope value, the $onChanges event is called and the bound data is updated, but the rows in the table do not change via ng-repeat to reflect the update -- after the table is initially drawn, no changes can be seen with subsequent data changes. Here is my code:

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 (Component):

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

HTML (Template):

<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>

I have tried just about everything I have seen in related questions on Stack Overflow to no avail, and I had no luck with rerendering the table completely with dtInstance. Any help would be greatly appreciated.

StackOverflowAvgJoe
  • 3
  • 2
  • it's not obvious from the limited code provided here the intended and actual results. you will be more likely to receive an answer to your question if you [edit] your code and provide a [mcve] that shows what is happening. – Claies Nov 01 '16 at 22:22

1 Answers1

0

v0.5.5 doesn't allow '$' char in controller variable name which unfortunately is the default value in Angular Component. Override it as a workaround e.g. controllerAs: ctrl

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

Reported this issue: https://github.com/l-lin/angular-datatables/issues/916

Koala Lam
  • 28
  • 3