Angular wrapping nested string data datatables

Question

Is there a better way to display nested tables in angular -datatables? I solved my problem using rowCallback and setting the click event:

$scope.dtOptions = DTOptionsBuilder.fromSource('data.json') .withOption('rowCallback', rowCallback) 

and in the click handler, I get a dt instance and create html using the row data from the data table instance.

 function rowCallback(tabRow, data, dataIndex) { $(tabRow).unbind('click'); $(tabRow).on('click', function () { console.log('click'); $(this).find('.a1-icon').toggleClass('fa-rotate-180'); var tr = $(tabRow); var table = $scope.dtInstance.DataTable; var row = table.row(tr); if ( row.child.isShown() ) { // This row is already open - close it row.child.hide(); tr.removeClass('shown'); } else { // Open this row row.child( format(row.data()) ).show(); tr.addClass('shown'); } }); } 

But it feels a little strange especially for angular. Here is Plunker with full simplified code http://plnkr.co/edit/gVf926obJKTXvXU7fLdA?p=preview

Answer 1

  $(tabRow).on('click', function () {}) //instead of this "on" event Use "load" $(tabRow).load('click', function () {})