ng-click / ngClick Directive Problem

[rimantoro]

Hi,

I'm using DT in an controller and use the server-side option to fetch the data. Data sucessfully fetched with paging, but when I create a delete button for rows, the ng-click failed to trigger the function attached into. Delete button should print a message into console when clicked.

I've already read this manual http://l-lin.github.io/angular-datatables/#/bindAngularDirective, but still not work. Strangely, there is no error or anything in browser console.

My version :

• Angular 1.2.6
• Chrome 43
• Datatables 1.10.7
• jQuery 2.1.4

Below is my codes

.controller('ClientListController', ['$scope', 'DTOptionsBuilder', 'DTColumnBuilder','SatuprodukApi', 'configSatuproduk', function($scope, DTOptionsBuilder, DTColumnBuilder, SatuprodukApi, configSatuproduk) {
    var vm = this;

    var apiGetUrl = SatuprodukApi.getUrl('/client/list/dtformat');
    var apiDelUrl = SatuprodukApi.getUrl('/client/delete');

    vm.delete = deleteRow;
    vm.message = '';
    vm.dtInstance = {};
    vm.dtOptions = DTOptionsBuilder.newOptions()
        .withOption('ajax', {
            url: apiGetUrl,
            beforeSend: function apiHeaderAuth(request) {
                request.setRequestHeader('Clientid', configSatuproduk.clientId);
                request.setRequestHeader('Pass', configSatuproduk.clientPass);
            },
            type: 'POST'
        })
    // or here
        .withDataProp('data')
            .withOption('processing', true)
            .withOption('serverSide', true)
            .withPaginationType('full_numbers');
    vm.dtColumns = [
        DTColumnBuilder.newColumn('id').withTitle('ID'),
        DTColumnBuilder.newColumn('code').withTitle('Client Code'),
        DTColumnBuilder.newColumn('ips').withTitle('IP Whitelist'),
        DTColumnBuilder.newColumn('created_at').withTitle('Created'),
        DTColumnBuilder.newColumn('updated_at').withTitle('Updated'),
        DTColumnBuilder.newColumn('deleted_at').withTitle('Deleted').notVisible(),
        DTColumnBuilder.newColumn(null).withTitle('Edit').renderWith(function(value, type, full) { 
            return "<a class=\"btn btn-success\" href=\"#/client/edit/"+value+"\">Edit</a>";
        }).notSortable(),
        DTColumnBuilder.newColumn(null).withTitle('Delete').notSortable().renderWith(deleteHtml)
    ];

    function deleteRow(id) {
        console.log( "Delete client " + id);
    }

    function deleteHtml(data, type, full, meta) {
        return '<button class="btn btn-warning" ng-click="dtClient.delete('+full.id+')">Delete</button>';
    }
}])

HTML

<div class="row">
    <div class="col-lg-12">
        <h1 class="page-header">Client</h1>
    </div>
</div>

<div class="row">
    <div class="col-lg-12">
        <div class="panel panel-default">
            <div class="panel-body">
                <div class="dataTable_wrapper" ng-controller="ClientListController as dtClient">
                    <p class="text-danger"><strong>{{ dtClient.message }}</strong></p>
                    <br>
                    <table datatable="" dt-options="dtClient.dtOptions" dt-columns="dtClient.dtColumns" dt-instance="dtClient.dtInstance" class="table table-striped table-bordered table-hover">
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>

[l-lin]

At first glance, it seems you forgot the createdRow option.

[rimantoro]

Ah, My bad.

This what its mean about "you can do it by recompiling your DataTable after its initialization is over" in the manual page.

Many thanks again.