Buttons added to a table generated with AngularJS Datatables are not executing functions in the current escope

Question

EDIT

I tried to update the function actionButtons():

function actionButtons(data, type, full, meta) {
    vm.project[data.id] = data;
    var html = '<button class="btn btn-info btn-xs" ng-click="project.editProject(' + data.id + ')">' +
           '   <i class="fa fa-edit"></i>' +
           '</button>&nbsp;' +
           '<button class="btn btn-danger btn-xs" ng-click="project.deleteProject(' + data.id + ')">' +
           '   <i class="fa fa-trash-o"></i>' +
           '</button>';
    el = $compile(html)($scope);
    return el;
}

Now it's rendering [Object][Object] instead of the HTML buttons. At least it produced a different result.

ORIGINAL POST

I have a table built with AngularJS Datatables as it follows:

HTML

<div ng-controller="ProjectCtrl as project">
    <table datatable="" dt-options="project.standardOptions" dt-columns="project.standardColumns" dt-instance="project.dtInstance" class="table table-condensed table-striped table-bordered table-hover" width="100%">
        <thead>
            <tr>
                <th data-hide="phone">ID</th>
                <th data-class="expand"> Processo</th>
                <th data-class="expand"> Objeto</th>
                <th data-hide="phone"><i class="fa fa-fw fa-map-marker txt-color-blue hidden-md hidden-sm hidden-xs"></i> UF</th>
                <th>Região</th>
                <th data-hide="phone,tablet"> Macrossegmento</th>
                <th data-hide="expand"> </th>
            </tr>
        </thead>
    </table>
</div>

JavaScript/Controller

.controller('ProjectCtrl', function($scope){
    vm.standardOptions = DTOptionsBuilder
            // TODO: Get the data below from a service
            .fromSource('/api/BasesDados/Concessoes/concessoes.php')
            .withOption('scrollX', '100%')
            .withDOM("<'dt-toolbar'<'col-xs-12 col-sm-6'f><'col-sm-6 col-xs-12 hidden-xs'l>r>" +
                    "t" +
                    "<'dt-toolbar-footer'<'col-sm-6 col-xs-12 hidden-xs'i><'col-xs-12 col-sm-6'p>>")
            .withBootstrap()
            .withButtons([
                {extend: 'colvis', text: 'View'},
                {extend: 'copy', text: 'Copy'},
                {extend: 'print', text: 'Print'},
                {extend: 'excel', text: 'MS Excel'},
                {
                    text: 'Add project',
                    key: '1',
                    action: function (e, dt, node, config) {
                        $scope.addProject();
                    }
                }
            ]);

    // Rendered columns. ID is not shown
    vm.standardColumns = [
        DTColumnBuilder.newColumn('id').notVisible(),
        DTColumnBuilder.newColumn('processo'),
        DTColumnBuilder.newColumn('objeto'),
        DTColumnBuilder.newColumn('uf'),
        DTColumnBuilder.newColumn('regiao'),
        DTColumnBuilder.newColumn('macro'),
        DTColumnBuilder.newColumn(null).withTitle('Ações').notSortable().renderWith(actionButtons)
    ];

    // Action buttons added to the last column: to edit and to delete rows
    function actionButtons(data, type, full, meta) {
        vm.project[data.id] = data;
        return '<button class="btn btn-info btn-xs" ng-click="project.editProject(' + data.id + ')">' +
               '   <i class="fa fa-edit"></i>' +
               '</button>&nbsp;' +
               '<button class="btn btn-danger btn-xs" ng-click="project.deleteProject(' + data.id + ')">' +
               '   <i class="fa fa-trash-o"></i>' +
               '</button>';
    }
});

The action buttons added through the function actionButtons() to the last column in the table receive an action each one: delete and edit.

However, the functions don't seem to respond to the click on those action buttons:

// Edit a project
$scope.editProject= function(projetoId){
    console.log(projetoId);
}
// Delete a project
$scope.deleteProject= function(projetoId){
    console.log(projetoId);
}

Note that the buttons receive the parameters:

<button ng-click="project.editProject(5026)">Editar</button>

It must be a conceptual misunderstanding on AngularJS scopes. What am I doing wrong in this case?

The code doesn't raise any error as I can notice by the output on the console of the browser (Google Chrome 56., Mozilla Firefox 50., MSIE 11.*).

My code is running on IIS 8.5 (it's irrelevant, I guess).

I guess you need to use The Angular $compile service for compiling the html with those buttons, so the ng-click "gets sense" into the angular world... or does AngularJS Datatables do it for you? — lealceldeiro
– lealceldeiro, Commented Feb 15, 2017 at 20:47
@AsielLealCeldeiro I tried what you recommended and updated the post. Thank you! — Not The Real Hemingway
– Not The Real Hemingway, Commented Feb 15, 2017 at 21:06
Your welcome :) One last suggestion according to your edit: debug the code and inspect what's on html on line el = $compile(html)($scope); and see if it's well structured, I mean, whether it is valid for what you are trying to do or not — lealceldeiro
– lealceldeiro, Commented Feb 15, 2017 at 21:09
is your controller a stand alone one or inside a directive? I reckon if you move the compile bit in a directive instead of controller it would work @NotTheRealHemingway — Yaser
– Yaser, Commented Feb 15, 2017 at 21:55
I'll will try that and then I'll update the post again. Thank you, guys! You are amazing! — Not The Real Hemingway
– Not The Real Hemingway, Commented Feb 16, 2017 at 1:57

Not The Real Hemingway · Accepted Answer · 2017-02-16 17:20:20Z

1

Found the solution.

Accordin to the AngularJS Datatables documentation, the following function compiles each row:

function createdRow(row, data, dataIndex) {
    $compile(angular.element(row).contents())($scope);
}

Then you have to add it to the options:

vm.standardOptions = DTOptionsBuilder
        .fromSource(urlToTheData)
        .withOption('createdRow', createdRow) // Here, I recompile the table's rows
        .withOption('scrollX', '100%')
        ...

I also had to remove the controller alias from ng-click:

From this <button ng-click="project.editProject(5026)">Edit</button>

To this <button ng-click="editProject(5026)">Edit</button>.

Thank to @AsielLealCeldeiro I added a $compile (searched the docs for it) and thanks to @Yaser I plyed with the compile service.

Thank you, StackOverflow community!

answered Feb 16, 2017 at 17:20

Not The Real Hemingway

1551 silver badge9 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Buttons added to a table generated with AngularJS Datatables are not executing functions in the current escope

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related