ng-clickイベントバインディングが角度データテーブル内で機能しない

Question

私は、学生情報をリストするために角度データテーブルを使用しています。私はすべてのデータをフェッチして、anglejsを使ってデータを繰り返すのではなく、すべての検索、並べ替え、ページングなどのサーバーサイドのAjax実装を実装したいと思います。並べ替え、検索、ページングが正常に動作しています。しかし、特定の行アクションをクリックすると、ng-clickイベントをバインドできません。

これが私の見解です：

これは私のjavascriptのソースコードです：

<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

我々はバインドしたい場合は、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

を追加しませんでした角度のあるデータテーブル行の特定のDOM要素にイベントをクリックするfind（jQuery）そのelemen任意のCSSセレクタを使用します。例えば ​​-

HTML

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

角度にStackOverflowに（V4）コンポーネント -

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

}