CODEWITHSUNDEEP
javascriptangularjsdatatableangular-datatables
wobsoriano
wobsoriano

Reputation: 13462

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

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?

Upvotes: 2

Views: 1601

Answers (1)

chirag satapara
chirag satapara

Reputation: 1947

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

Upvotes: 1

Related Questions