Question

我正在使用角度1.4.3和角度数据表（这里是链接：http://l-lin.github.io/angular-datatables）。

我的需求是基本的。我需要在点击行时展开该行，并且所有ng-click或其他人都需要工作。但是在图书馆的文档中，他们会像这样触发回调;

https://datatables.net/examples/api/row_details.html

当我尝试在示例中向该格式函数添加ng-click的按钮时。它不起作用（我的意思是ng-click不起作用。）。我认为问题是因为元素在文档加载后附加到表格。

你对此有任何想法吗？

Answer 1

你是对的，ng-click必须是$compile之前才有任何好处。但是你没有有去所有角度方式：因为dataTables是一个jQuery插件，你仍然可以使用委托事件处理程序等等 - 最大的问题是访问API，fortunetaly我们可以使用而是dtInstance。这是臭名昭着的Child rows示例的角度数据表版本：

标记：

<table datatable="" dt-options="dtOptions" dt-columns="dtColumns" dt-instance="dtInstance"></table>

基本初始化，使用远程JSON源（此处设置通知.details-control）：

$scope.dtColumns = [
  DTColumnBuilder.newColumn('name').withTitle('Name')
                                   .withOption('className', 'details-control'),
  DTColumnBuilder.newColumn('position').withTitle('Position'),
  DTColumnBuilder.newColumn('salary').withTitle('salary')
];  

$scope.dtInstance = {};

$scope.dtOptions = DTOptionsBuilder
  .fromSource('https://api.myjson.com/bins/2v7sr')
  .withPaginationType('full_numbers')
  .withDataProp('data');

＆＃34;子行＆＃34;示例移植，因此它以角度运行：

var format = function ( d ) {
    // `d` is the original data object for the row
    return '<table cellpadding="5" cellspacing="0" border="0" style="padding-left:50px;">'+
        '<tr>'+
           '<td>Full name:</td>'+
           '<td>'+d.name+'</td>'+
        '</tr>'+
        '<tr>'+
           '<td>Extension number:</td>'+
           '<td>'+d.extn+'</td>'+
        '</tr>'+
        '<tr>'+
           '<td>Extra info:</td>'+
           '<td>And any further details here (images etc)...</td>'+
         '</tr>'+
        '</table>';
}

$('body').on('click', '.details-control', function() {
   var tr = $(this).closest('tr');
   var row = $scope.dtInstance.DataTable.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');
   }
})

基本上它是相同的，只使用body作为委托的父元素，使用dtInstance而不是dataTable API实例。

演示 - ＆gt;的 http://plnkr.co/edit/0CA9jMIg4gXqj9fnY38p?p=preview

Angularjs可扩展表行

1 个答案: