How to make ng-click work in a Angular DataTables column builder?

Question

So I have this code:

Controller:

    vm.dtColumns = [
        DTColumnBuilder.newColumn('product_code').withTitle('Code'),
        DTColumnBuilder.newColumn('product_name').withTitle('Name'),
        DTColumnBuilder.newColumn(null).withTitle('Actions').notSortable()
        .renderWith(function(data, type, full, meta) {
            return ` <button class="btn btn-info btn-raised" ng-click="openViewProductModal(${data.product_id})">View</button>`;
        })
    ];

    $scope.openViewProductModal = function(id) {
       console.log(id)
    }

HTML:

<div ng-controller="ProductCtrl as productControl" ng-init="loadProducts()">
    <table datatable="" dt-options="productControl.dtOptions" dt-columns="productControl.dtColumns" dt-instance="productControl.dtInstance" class="row-border hover"></table>
</div>

I can't even get the console.log() to work though everything is rendered perfectly. Am I missing something here?

You're dynamically adding a button with ng-click. The click won't activate on its own. You need to $compile stuff : docs.angularjs.org/api/ng/service/$compile — Jeremy Thille
– Jeremy Thille, Commented Aug 25, 2017 at 12:46

chirag satapara · Accepted Answer · 2017-08-25 12:48:24Z

1

try below solution.Put a createdRow function after vm.dtColumns , you need to compile row for the ng-click event.

  vm.dtColumns = [
        DTColumnBuilder.newColumn('product_code').withTitle('Code'),
        DTColumnBuilder.newColumn('product_name').withTitle('Name'),
        DTColumnBuilder.newColumn(null).withTitle('Actions').notSortable()
        .renderWith(function(data, type, full, meta) {
            return ` <button class="btn btn-info btn-raised" ng-click="openViewProductModal(${data.product_id})">View</button>`;
        })
    ];

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

    $scope.openViewProductModal = function(id) {
       console.log(id)
    }

answered Aug 25, 2017 at 12:48

chirag satapara

1,9471 gold badge15 silver badges26 bronze badges

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

3 Comments

wobsoriano Over a year ago

It worked. Now my problem is to how to pass the index of an item to the button.

chirag satapara Over a year ago

@FewFlyBy ,I am not sure , but you may be find it in meta.

davidkonrad Over a year ago

@chiragsatapara ng-click="openViewProductModal('+full.product_id+')" ...

Collectives™ on Stack Overflow

How to make ng-click work in a Angular DataTables column builder?

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related