ng-click在响应角度数据表中不起作用

时间:2016-02-29 14:01:10

标签: javascript jquery angularjs datatables

我试图以响应的方式点击我的表格中的元素,但它不起作用。似乎ng-click不能很好地工作..

这是我的html表:

<table id="listadifferite" datatable="ng"  dt-options="myController.dtOptions"
   class="table table-bordered table-striped" cellspacing="0" width="100%">
   <thead>
      <tr>
         <th>Col1</th>
         <th>Col2</th>
         <th>Col3</th>
         <th>Col4</th>
      </tr>
   </thead>
   <tbody>
      <td data-dt-column="{{differite.idDif}}_0" class="text-center">Prova</td>
      <td data-dt-column="{{differite.idDif}}_1" class="text-center">
         <a ng-click="controllerDif.mostraDettaglio(differite)"><i class="fa fa-search-plus"></i></a>
      </td>
      <td data-dt-column="{{differite.idDif}}_2" class="text-center">Prova</td>
      <td data-dt-column="{{differite.idDif}}_3" class="text-center">Prova</td>
      </tr>
   </tbody>
</table>

这是myController中的dtOptions:

self.dtOptions = DTOptionsBuilder.newOptions()
 .withPaginationType('full_numbers')
 .withOption('responsive', {
  details: {
   type: 'column',
   target: 0
  }
 })

另一个类似问题:https://github.com/l-lin/angular-datatables/issues/552

1 个答案:

答案 0 :(得分:1)

将此功能添加到控制器中修复它:

 function renderer(api, rowIdx, columns) {
                var data = $.map( columns, function ( col, i ) {
                     return col.hidden ?
                         '<li data-dtr-index="'+col.columnIndex+'" data-dt-row="'+col.rowIndex+'" data-dt-column="'+col.columnIndex+'">'+
                              '<span class="dtr-title">'+
                                  col.title+
                            '</span> '+
                            '<span class="dtr-data">'+
                                col.data+
                           '</span>'+
                       '</li>' : 
                       '';
                   }).join('');
                   return data ?
                       $compile(angular.element($('<ul data-dtr-index="'+rowIdx+'"/>').append( data )))($scope) :  
                        false;
               }

并添加自适应选项

 .withOption('responsive', {
              details: {
                  renderer: renderer
              }
         })