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, и, наоборот, мы можем использовать dtInstance. Вот версия угловой DataTables позорного примера дочерние строки:

Markup:

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

Основная информация ally это то же самое, просто прослушивание body в качестве родительского элемента для делегирования, используя dtInstance вместо экземпляра API dataTable.

демо ->http://plnkr.co/edit/0CA9jMIg4gXqj9fnY38p?p=preview