ng-click not working with Datatable and Angular Js

Question

I have read several similar questions but none worked for me on this issue. I am using laravel-datatable with angular js. But 'ng-click' does not work with the dynamically generated datatable buttons. I read about $compile but dont know how to implement it with the table. Am very new to angular js.

When I click on the button nothing happens.

app.controller('myController', ['$scope','$compile', function($scope, $compile) {

$('#stafftbl').DataTable( {
      paging: true,
      "ordering": true,
      "searching": true,
      "bInfo" : true,
      deferRender: true,
      ajax: 'get_staffsalary',
      columns: [
          { data: 'staff_num', name: 'staff_num'},
          { data: 'staffname ', name: 'staffname' },
          { data: 'salary', name: 'salary' },
          { data: 'date_effected', name: 'date_effected' },
          { data: 'updated_at', name: 'updated_at' },
          { data: null, render: function (data, type, full) {
                  return '<button class="btn btn-xs btn-primary" ng-click="update('+full.id+')">Update Salary</button> ';
          }},

      ],

  });

   $scope.update= function (id) {
        alert(id)
    }
 }]);

Please any help with this?

You have to write the error in your question. "dont work" can have hundread reasons. — Asim, Sep 29 '17 at 08:47
I have edited and added it to the question. Nothing happens when i click the button. — Toni, Sep 29 '17 at 08:51
Possible duplicate of [**Angular \`ng-click\` not working in DataTables table row**](https://stackoverflow.com/questions/41641601/angular-ng-click-not-working-in-datatables-table-row) or [**Angular Datatable ng-click not working**](https://stackoverflow.com/questions/32918684/angular-datatable-ng-click-not-working) etc etc — davidkonrad, Sep 29 '17 at 12:59

score 1 · Accepted Answer · answered Sep 29 '17 at 09:02

1

Yes, you are correct in that you need to use $compile.

After dynamically adding html with angular attributes in it, like you are with your data table, you must call $compile so that angular can pick up the attributes.

You'll need to inject the $compile service into your controller right after $scope. Then, after the HTML has been added you will need to compile the new DOM and link it to the scope by calling $compile(new_html)($scope) in the context of your controller.

Refer to the $compile doco for reference

answered Sep 29 '17 at 09:02

MJL

161
2
7

Where do I add this code? $compile(new_html)($scope) – Toni Sep 29 '17 at 09:19
Where is that first code block in your question called from? If it's called within your controller, you should be able to call $compile in a callback on the DataTable. I'm not familiar with the DataTable plugin you are using, but it should have a callback option for when the html has been added. – MJL Sep 29 '17 at 09:45
I have now moved the codes to my controller and edited the question too. Where do I call the $compile(new_html)($scope) – Toni Sep 29 '17 at 10:12
I have added $compile(new_html)($scope) properly, and its working fine now. Do I need to post the new code as an answer? – Toni Sep 29 '17 at 11:00
Good to hear you got it working :) Yeah, add your solution as an answer. It might help other people. I'd appreciate an upvote if my answer helped you at all. Thanks. – MJL Sep 29 '17 at 11:10

Toni · Answer 2 · 2017-09-29T18:51:31.080

I solved it using @MJL 's answer. Here is the full block of code, it may hep someone else

app.controller('myCtrl', ['$scope','$compile', function($scope, $compile) {

var table = $('#stafftbl').DataTable( {
    processing: false,
    serverSide: false,
    deferRender: true,
    ajax: 'get_staffsalary',
    columns: [
        { data: 'staff_num', name: 'staff_num'},
        { data: 'salary', name: 'salary' },
        { data: 'date_effected', name: 'date_effected' },
        { data: 'updated_at', name: 'updated_at' },
        { data: null, render: function (data, type, full) {
            return '<button class="btn btn-xs btn-primary text-size-small" ng-click="clickme()>Update</button> ';
        }},

    ],
    "createdRow": function ( row, data, index ) {
        $compile(row)($scope);  //add this to compile the DOM
    }

})

 $scope.clickme = function () {
   alert('clicked me')
}
}]);

@PrashantPokhriyal, the question should be closed, totally 1:1 dub of several previous questions, the answer above as well. — davidkonrad, Sep 29 '17 at 13:05

ng-click not working with Datatable and Angular Js

2 Answers2