2

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

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

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

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

你有什么想法吗？

4

1 回答 1

3

你是对的，在它有任何好处之前必须先被淘汰ng-click。但是你$compile不必走所有的角度：因为 dataTables 是一个 jQuery 插件，你仍然可以使用委托事件处理程序等等 - 最大的问题是访问 API，幸运的是我们可以使用它。这是臭名昭著的子行示例的角度数据表版本：dtInstance

标记：

<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');

移植了“子行”示例，因此它可以在 angular 中工作：

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 实例。

演示-> http://plnkr.co/edit/0CA9jMIg4gXqj9fnY38p?p=preview

于 2016-02-22T12:20:11.543 回答