jquery - Angularjs可扩展表格行

Question

我正在使用 Angular 1.4.3 和 Angular 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 才能发挥作用。但你不必必须采用所有 Angular 的方式:由于 dataTables 是一个 jQuery 插件，你仍然可以使用委托(delegate)事件处理程序等等 - 最大的问题是访问 API，幸运的是我们可以使用改为 dtInstance。这是臭名昭著的子行示例的 Angular 数据表版本:

标记:

<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 作为委托(delegate)的父元素，使用 dtInstance 而不是 dataTable API 实例。

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