Angular datatables nested rows rendering

Question

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

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

and in a click handler I get dt-instance and build html using row data from 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 litte bit weird 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 () {})