Toni Toni - 3 years ago 107
AngularJS Question

ng-click not working with Datatable and Angular Js

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?

MJL MJL
Answer Source

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

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download