Angularjs可扩展表格行

Question

我使用的是角1.4.3和角度dataTables（这里是链接：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'd才可以。但你不要有去所有角度的方式：因为dataTables是一个jQuery插件，你仍然可以使用委托事件处理程序等 - 最大的问题是访问API，fortunetaly我们可以使用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'); 

“子行”示例已移植，因此适用于角度：

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