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
– Asim, Commented Sep 29, 2017 at 8:47
I have edited and added it to the question. Nothing happens when i click the button. — Toni
– Toni, Commented Sep 29, 2017 at 8:51
Possible duplicate of Angular `ng-click` not working in DataTables table row or Angular Datatable ng-click not working etc etc — davidkonrad
– davidkonrad, Commented Sep 29, 2017 at 12:59

MJL · Accepted Answer · 2017-09-29 09:02:32Z

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, 2017 at 9:02

MJL

1612 silver badges8 bronze badges

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

5 Comments

Toni Over a year ago

Where do I add this code? $compile(new_html)($scope)

MJL Over a year ago

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.

Toni Over a year ago

I have now moved the codes to my controller and edited the question too. Where do I call the $compile(new_html)($scope)

Toni Over a year ago

I have added $compile(new_html)($scope) properly, and its working fine now. Do I need to post the new code as an answer?

MJL Over a year ago

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.

Toni · Accepted Answer · 2017-09-29 18:51:31Z

0

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')
}
}]);

edited Sep 29, 2017 at 18:51

answered Sep 29, 2017 at 11:39

Toni

69911 silver badges30 bronze badges

2 Comments

davidkonrad Over a year ago

@PrashantPokhriyal, the question should be closed, totally 1:1 dub of several previous questions, the answer above as well.

davidkonrad Over a year ago

@PrashantPokhriyal, the question should be closed, totally 1:1 dub of several previous questions, the answer above as well.

Collectives™ on Stack Overflow

ng-click not working with Datatable and Angular Js

2 Answers 2

5 Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related