ng-click Event-Bindung funktioniert nicht in angular-datatables

Question

Ich verwende angular-datatables zum Auflisten von Studenteninformationen. Ich möchte serverseitige Ajax-Implementierung für jede Suche, Sortierung, Paging usw. implementieren, anstatt alle Daten abzurufen und die Daten mit angularjs zu wiederholen. Sortieren, Suchen, Paging funktioniert gut. Aber ich bin nicht in der Lage, ng-click Ereignis zu binden, wenn Sie auf bestimmte Zeilenaktionen klicken.

Das ist meine Ansicht:

Dies ist mein JavaScript-Quellcode:

<div ng-app="myApp"> 
    <div ng-controller="OrganizationController"> 
    <table id="entry-grid" datatable="" dt-options="dtOptions" 
      dt-columns="dtColumns" class="table table-hover"></table> 
    </div> 
</div> 

<script> 
    var app = angular.module('myApp',['datatables']); 
    app.controller('OrganizationController', BindAngularDirectiveCtrl); 
    function BindAngularDirectiveCtrl($scope, $compile, DTOptionsBuilder, DTColumnBuilder) { 
     var vm = this; 
     vm.message = ''; 
     vm.edit = edit; 
     vm.dtInstance = {}; 
     vm.persons = {}; 
     $scope.dtColumns = [ 
      DTColumnBuilder.newColumn("organization_name").withOption('organization_name'), 
      DTColumnBuilder.newColumn(null).withTitle('Actions').notSortable() 
        .renderWith(actionsHtml) 
     ] 
     $scope.dtOptions = DTOptionsBuilder.newOptions().withOption('ajax', { 
        dataSrc: "data", 
        url: "organizations", 
        type:"get" 
       }) 
       .withOption('processing', true) //for show progress bar 
       .withOption('serverSide', true) // for server side processing 
       .withPaginationType('full_numbers') // for get full pagination options // first/last/prev/next and page numbers 
       .withDisplayLength(2) // Page size 
       .withOption('aaSorting',[0,'asc']) 
     function edit() { 
      console.log('hi') 
     } 

     function actionsHtml(data, type, full, meta) { 
      vm.persons[data.id] = data; 
      return '<button class="btn btn-warning" ng-click="edit()">' + 
        ' <i class="fa fa-edit"></i>' + 
        '</button>'; 
     } 
    } 

</script> 

Answer 1

Sie nicht withOption("rowCallback",fn)

<script> 
    var app = angular.module('myApp',['datatables']); 
    app.controller('OrganizationController', BindAngularDirectiveCtrl); 
    function BindAngularDirectiveCtrl($scope, $compile, DTOptionsBuilder, DTColumnBuilder) { 
     var vm = this; 
     vm.message = ''; 
     vm.edit = edit; 
     vm.dtInstance = {}; 
     vm.persons = {}; 
     $scope.dtColumns = [ 
      DTColumnBuilder.newColumn("organization_name").withOption('organization_name'), 
      DTColumnBuilder.newColumn(null).withTitle('Actions').notSortable() 
        .renderWith(actionsHtml) 
     ] 
     $scope.dtOptions = DTOptionsBuilder.newOptions().withOption('ajax', { 
        dataSrc: "data", 
        url: "organizations", 
        type:"get" 
       }) 
       .withOption('rowCallback', rowCallback) 
       .withOption('processing', true) //for show progress bar 
       .withOption('serverSide', true) // for server side processing 
       .withPaginationType('full_numbers') // for get full pagination options // first/last/prev/next and page numbers 
       .withDisplayLength(2) // Page size 
       .withOption('aaSorting',[0,'asc']) 
     function edit() { 
      console.log('hi') 
     } 

     function actionsHtml(data, type, full, meta) { 
      vm.persons[data.id] = data; 
      return '<button class="btn btn-warning" ng-click="edit()">' + 
        ' <i class="fa fa-edit"></i>' + 
        '</button>'; 
     } 

     function rowCallback(nRow, aData, iDisplayIndex, iDisplayIndexFull) { 
     // Unbind first in order to avoid any duplicate handler (see https://github.com/l-lin/angular-datatables/issues/87) 
     $('td', nRow).unbind('click'); 
     $('td', nRow).bind('click', function() 
     { 
      $scope.$apply(function() { 
       alert("You've clicked row," + iDisplayIndex); 
      }); 
     }); 
     return nRow; 
    } 

    } 

</script> 

Answer 2

hinzugefügt haben, wenn wir eine binden möchten Klicken Sie auf Ereignis zu bestimmten DOM-Element in der winkeligen Datentabelle Zeile suchen (jQuery), dass elemen t Verwenden Sie einen CSS-Selektor. Zum Beispiel -

HTML

<table id='table' datatable [dtOptions]="dtOptions" class="table table-sm table-striped table-bordered" cellspacing="0" width="100%"> 

Angular (v4) Komponenten-

export class ExampleComponent implements OnInit { 
    dtOptions: DataTables.Settings = {}; 

    ngOnInit() { 
     //Starts Angular jQuery DataTable server side processing settings 
     let ajaxSettings: any = { 
      settings: { 
       ajax: { 
        ... 
       }, 
       serverSide: true, 
       searchDelay: 800, 
       deferRender: true, 
       processing: true, 
       autoWidth: false, 
       stateSave: false, 
       searching: true, 
       aoColumns: [ 
        //Table column definition 
        { 
         //Action Column 
         sTitle: 'Action', 
         sWidth: "20%", 
         bSearchable: false, 
         bSortable: false, 
         mRender: (data, type, full) => { 
          return "<a href='javascript:void(0);' class='custombtn btn btn-sm btn-primary'><span class='fa fa-paper-plane-o'></span>Action Button</a>"; 
         } 
        } 
       ], 
       fnServerParams: function (data) { 

       }, 
       initComplete:() => { 

       }, 
       rowCallback: (row: Node, data: any[] | Object, index: number) => { 
        const self = this; 
        // Unbind first in order to avoid any duplicate handler 
        // (see https://github.com/l-lin/angular-datatables/issues/87) 
        var element = $('td', row).find('a.custombtn'); 
        if (element) { 
         element.unbind('click'); 
         element.bind('click',() => { 
          self.someClickHandler(data, index); 
         }); 
        } 
        return row; 
       } 
      } 
     }; 

     this.dtOptions = ajaxSettings.settings; 
     //Ends Angular jQuery DataTable server side processing settings 
    } 

//Will be called on click of anchor tag which has the class "custombtn" 
    someClickHandler(info: any, index: number): void { 
     alert(JSON.stringify(info) + ' index =>' + index); 
    } 

}