button in a row with a AngularJs callback

antoniocosta

Hi.
I am new to datatables, and I am loving them already.
However I am facing an issue linking it with angularJS.

I would like to have a button in the last column to delete the record through angularJS.

So the idea would be having a function like:

$scope.deleteRecord = function(recordId){
   //something here
};

and in the row having something like

var dataset = ['Val1','val2','val3','<button ng-click="deleteRecord(IdGoesHere)">Delete This Record</button>'];

The problem is, when I click in the button the scoped function is not called.

Sorry if this sounds like a basic question, but I am really starting using datatables and I am still a bit confused.

Thank you in advance.

Kind regards,
Antonio

antoniocosta

ok. Found a solution that is working. (not pretty, but it works..)

The reason it is not working is due to angular needs to be compiled. As I am adding the button post-compilation, it doesn't capture the ng-click action (and also the scope). Probably the explanation is not technically 100% accurate, but it is something like that.

There are several ways to fix the issue, like keeping an hidden field to control with a watch on angular controller.

But the one I found easier was to use the onclick instead ng-click and use the object scope directly from the DOM.

Several people discourage using the DOM to retrieve the scope, but honestly, at the moment I think it is the easiest way.

So, the button will be something like

var dataset = ['Val1','val2','val3','<button onclick="angular.element(this).scope().deleteRecord(IdGoesHere)">Delete This Record</button>'];

I hope this will help someone.

allan

Thanks for posting back. I haven't used Angular much myself, so that one would have been beyond me!

Allan

antoniocosta

Yeah, I am not an Angular expert as well, I am more a Server Side Dev (c#) but I need to use it on the client side.