ng-click事件绑定在angular-datatables中不起作用

Question

我正在使用角度数据表来列出学生信息。我想为每个搜索，排序，分页等实现服务器端ajax实现，而不是获取所有数据并使用angularjs重复数据。排序，搜索，分页工作正常。但是，当单击特定的行操作时，我无法绑定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

如果我们想将click事件绑定到角度数据表行中的特定DOM元素，则使用任何CSS选择器查找（jQuery）该元素。例如 -

HTML

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

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

}