2

angular 1.4.3 と angular dataTables を使用しています (リンクはhttp://l-lin.github.io/angular-datatablesです)。

私のニーズは基本的なものです。クリックされたときに行を展開する必要があり、すべてのng-click's またはその他が機能する必要があります。しかし、ライブラリのドキュメントでは、コールバックを次のように起動します。

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

ng-click例でそのフォーマット機能を持つボタンを追加しようとすると。動作しません（動作しないという意味ng-clickです）。ドキュメントのロード後に要素がテーブルに追加されるため、問題が発生すると思います。

それについて何か考えはありますか？

4

1 に答える 1

3

あなたは正しいです、それが良いものにng-clickなる$compile前に'd'dする必要があります。しかし、すべての角度を変える必要はありません。dataTablesは jQuery プラグインであるため、委任されたイベント ハンドラーなどを引き続き使用できます。最大の問題は、API にアクセスすることです。幸いなことに、dtInstance代わりに を使用できます。これは、悪名高い子行の例の angular-datatables バージョンです。

マークアップ :

<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 に答える