Action Button loosing it's binding on browser resizing, Please Help

Hi @l-lin

I followed the example from angular-datatables advance example Bind Angular Directive and used it together with the Responsive plugin. but it’s loosing action filed’s Binding.

I have follow all comments from the issue https://github.com/l-lin/angular-datatables/issues/324 but no luck,

it’s working fine in full screen.

Here is the Code:

‘use strict’; angular.module(‘showcase.withResponsive’, [‘datatables’]) .controller(‘WithResponsiveCtrl’, WithResponsiveCtrl);

function WithResponsiveCtrl($scope, $compile,DTOptionsBuilder, DTColumnBuilder) { var edit = function() { alert(‘edit!’); };

var deleteRow = function() {
    alert('delte!');
};
var actionsHtml = function (data, type, full, meta) {
return '<button class="btn btn-warning" ng-click="edit()">' +
    '   <i class="fa fa-edit"></i>' +
    '</button>&nbsp;' +
    '<button class="btn btn-danger" ng-click="deleteRow()">' +
    '   <i class="fa fa-trash-o"></i>' +
    '</button>';
};
 var createdRow = function (row, data, dataIndex) { 
    $compile(angular.element(row).contents())($scope);
};

$scope.edit = edit;
$scope.deleteRow = deleteRow;
$scope.message = '';
$scope.dtInstance = {};


$scope.dtOptions = DTOptionsBuilder.fromSource('http://127.0.0.1:1771/data.json')
    .withPaginationType('full_numbers')
.withOption('createdRow', createdRow)
    .withOption('responsive', true);
$scope.dtColumns = [
    DTColumnBuilder.newColumn('id').withTitle('ID'),
    DTColumnBuilder.newColumn('firstName').withTitle('First name'),
    DTColumnBuilder.newColumn('lastName').withTitle('Last name'),
    DTColumnBuilder.newColumn(null).withTitle('Actions').notSortable().renderWith(actionsHtml)
];

}

Table HTML

                           <table datatable="" dt-options="dtOptions" dt-columns="dtColumns" dt-instance="dtInstance" class="row-border hover" width="100%"></table>

[marcokorb]

Hello, just to share an option to bind a directive in child rows that worked for me.

If you check the dataTables.responsive.js, Responsive object has a static object called ina property defaults with the following code:

details{
   renderer: function ( api, rowIdx, columns ) {
      var data = $.map( columns, function ( col, i ) {
            return col.hidden ?
                  '<li data-dtr-index="'+col.columnIndex+'" data-dt-row="'+col.rowIndex+'" data-dt-column="'+col.columnIndex+'">'+
                        '<span class="dtr-title">'+
                              col.title+
                        '</span> '+
                        '<span class="dtr-data">'+
                            col.data+
                        '</span>'+
                   '</li>' : 
                   '';
               }).join('');

               return data ?
                    $('<ul data-dtr-index="'+rowIdx+'"/>').append( data ) :
                    false;
           }}`

So, in the controller you must copy the code above and simply turn that into a function:

  function renderer( api, rowIdx, columns ) {
                var data = $.map( columns, function ( col, i ) {
                     return col.hidden ?
                         '<li data-dtr-index="'+col.columnIndex+'" data-dt-row="'+col.rowIndex+'" data-dt-column="'+col.columnIndex+'">'+
                              '<span class="dtr-title">'+
                                  col.title+
                            '</span> '+
                            '<span class="dtr-data">'+
                                col.data+
                           '</span>'+
                       '</li>' : 
                       '';
                   }).join('');

                   return data ?
                       $compile(angular.element($('<ul data-dtr-index="'+rowIdx+'"/>').append( data )))($scope) :  
                        false;
               }

And now we set the responsive option with our new function:

DTOptionsBuilder
     .fromFnPromise(fnPromise)
     .withOption('responsive', {
          details: {
              renderer: renderer
          }
     })

[ghost]

what about the idea of compiling the content of the child after showing it ?

something like this :

    $compile(angular.element(row).contents())($scope);