ng-click not working AngularJS and dataTables ng-click not working AngularJS and dataTables angularjs angularjs

ng-click not working AngularJS and dataTables


I'm using Angular-datatbles, and I was trying to dynamically add, Edit & Remove links to the datatble rows and display modal on ng-click;

This was the solution for my case;

$scope.dtOptions.withOption('fnRowCallback',     function (nRow, aData, iDisplayIndex, iDisplayIndexFull) {        $compile(nRow)($scope);     });

All the datatable binding code;

$scope.reloadData = function () {    $scope.dtOptions.reloadData();};$scope.dtColumnDefs = [    DTColumnDefBuilder.newColumnDef(2).renderWith(function (data, type, row) {        var html = '<a href="" class="txt-color-blue pull-left" ng-click="editModal()"><i class="fa fa-pencil hidden-xs"></i> Edit</a>' +                   '<a href="" class="txt-color-red padding-top-15" ng-click="removeModal()"><i class="fa fa-times hidden-xs"></i> Remove</a>';        return html;    })];$scope.dtColumns = [    DTColumnBuilder.newColumn('name').withTitle('Name'),    DTColumnBuilder.newColumn('type').withTitle('Type'),    DTColumnBuilder.newColumn('id').withTitle(''),];$scope.dtOptions.withOption('fnRowCallback',     function (nRow, aData, iDisplayIndex, iDisplayIndexFull) {        $compile(nRow)($scope);     });


I solved this by going through each td and calling $compile. Using the datatable row callback function. Hope this helps.

options.fnCreatedCell =  function (nTd, sData, oData, iRow, iCol) {    $compile(nTd)($scope);}//or rowoptions.fnCreatedRow = function( nRow, aData, iDataIndex ) {    $compile(nRow)($scope);}


The delete function in your controller isn't called because AngularJS doesn't know anything about DataTables's insertion of those elements to the DOM, thus ngClick directive within those elements isn't compiled and linked. So change:

dataTable.fnAddData(data.aaData);

To

dataTable.fnAddData(data.aaData);$compile(element)(scope);

And to inject $compile service:

.directive('datatable', function () {

To

.directive('datatable', function ($compile) {

And your delete function is broken in the jsFiddle, hope that's not the case in your actual project!