Cell button in datatables using AngularJS

All we need is an easy explanation of the problem, so here it is.

I’m building a website using angularjs and i’m getting data from a webservice. I need to populate that data to a datatable and create an edit button for each row. After some investigation i came up with this

The problem is that the ng-click isn’t working probably because i need to compile the html i injected to the table cell. I’ve tried that in several ways but unfortunately i’m still very new to angular and i don’t seem to understand how i can accomplish that. I really need help with this one.

This is my directive:

dialogApp.directive('myTable', function ($compile) {
return {
    restrict: 'E, A, C',
    link: function (scope, element, attrs, controller) {
        var dataTable = element.dataTable(scope.options);

        scope.$watch('options.aaData', handleModelUpdates, true);

        function handleModelUpdates(newData) {
            var data = newData || null;
            if (data) {
    scope: {
        options: "="

The controller:

dialogApp.controller('DataTableTestController', ['$scope', function($scope){
$scope.coisas = "coisas";
$scope.botaoEdit = function(a){

$scope.options = {
    "sDom": '<"H"lf>t<"F"ip>',
    "bStateSave": true,
    "bPaginate": false,
    "bLengthChange": false,
    "bFilter": true,
    "bSort": true,
    "bInfo": true,
    "bAutoWidth": false,
    "sPaginationType": "full_numbers",
    aoColumns: [{
        "sTitle": "name"
    }, {
        "sTitle": "price"
    }, {
        "sTitle": "category"
    }, {
        "sTitle": "action"
    }, null],
    "aaSorting": [[ 0, "asc" ]],
    aoColumnDefs: [
        { "bSortable": true, "aTargets": [0] },
        { "bSortable": false, "aTargets": [1,2,3,4] }
    bJQueryUI: true,
    aaData: []

var dbStuff = [
        "name": "Stuff1",
        "price": 10000000.00,
        "description": "Expensive Stuff",
        "name": "Stuff2",
        "price": 20000000.00,
        "description": "Oh my...",
        "wanna":"have money"

for (var key in dbStuff){
                                "<button ng-click=\"botaoEdit("+dbStuff[key].name+")\">test button</button>"

$scope.counter = 0; }])

And the HTML:

<link type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.12/themes/redmond/jquery-ui.css" rel="nofollow noreferrer noopener" rel="stylesheet" />
<link rel="stylesheet" type="text/css" href="http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.8.2/css/jquery.dataTables.css" rel="nofollow noreferrer noopener">

<div ng-app="tableExample">
    <div ng-controller="DataTableTestController">   
        {{ coisas }}
        <table my-table options="options" class="jquery-datatables"></table>

How to solve :

I know you bored from this bug, So we are here to help you! Take a deep breath and look at the explanation of your problem. We have many solutions to this problem, But we recommend you to use the first method because it is tested & true method that will 100% work for you.

Method 1

Yes, you’re right, ng-click directive wasn’t compiled by angular.
So the most straight forward way is to use onclick listener:

 "<button onclick=\"angular.element(this).scope().botaoEdit('"+dbStuff[key].name+"')\">test button</button>"

Don’t forget to add quotes: botaoEdit(''), in your fiddle you try to access Stuff1 variable 🙂

In the end, I think the best way is to use some grid plugin or ng-repeat, that would build rows for your table when data recieved. In this approach ng-click in your rows will work fine.

Note: Use and implement method 1 because this method fully tested our system.
Thank you 🙂

All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0

Leave a Reply