ng-click is not working with AngularJS and jquery dataTables if using row.add

Question

I am new to angualrjs , I am using jQuery DataTable directive with angularJS which is working fine. The problem I am facing is adding javascript function to "TR" dynamically with "ng-click" which is not working. It seem's like dynamically added elements are not recognized by angular.

Can somebody help me out solving this problem.

There are many questions in Stackoverflow and mentioned solution I already tried but not working actually I am using row.add method of jquery for popluating rows.

Please find the code which I am using

angular.module('myApp', [])
.controller('myCtrl', ['$scope','$filter','$http', '$compile', function($scope, $filter, $http,$compile) {
    $scope.myFunc = function() {        
            $http.get('http://localhost:9999/Angular_web/rest/main_search/byaufnum/').
            then(function(response) {
                var mytable = $('#table1').DataTable();
                response.data.map(function(item) {
                    mytable.row.add(['<span style=\'white-space: nowrap\'><a href=javascript:angular.noop(); ng-click=\"getBGPdata(\''+item.auftragsNr+'\')\">'+item.auftragsNr+'</a></span>']);
                    $compile(mytable.row)($scope);
                })
                mytable.draw(false);
            }); 
    };

    $scope.getBGPdata = function(searchValue) {
        console.log('--> '+searchValue);
    };
}]);

I know that that problem can be resolved by using $compile and $scope but not sure how to add this in above code.

Below is the HTML of redering table

<tr role="row" class="odd"><td class="sorting_1"><span style="white-space: nowrap"><a href="javascript:angular.noop();" ng-click="getBGPdata('KRT-ZDK-PMN_NEU-WWT_loopback_SFV_1')">KRT-ZDK-PMN_NEU-WWT_loopback_SFV_1</a></span></td>

Answer 1

issue is compiling mytable which is not a DOM element (its a DataTable instance object)

so you need to do it like this

      var table = $('#table1');
      var mytable = table.DataTable();
      response.data.forEach(function(item) {
        mytable.row.add(['<span style=\'white-space: nowrap\'><a href=javascript:angular.noop(); ng-click=\"getBGPdata(\'' + item.auftragsNr + '\')\">' + item.auftragsNr + '</a></span>']);
      })
      mytable.draw(false);
      $compile(table)($scope); // here table not mytable

working example JSFIDDLE

EDIT

DataTables will only render first page initially, so when you apply $compile(table)($scope); its only compiling first page rows, not all rows (since they are not yet rendered).

to fix this issue, you need to compile all rows before adding them to DataTable

    success: function(data) {
      var mytable = table.DataTable();
      var tbody = $('<tbody></tbody>');
      data.forEach(function(item) {
        tbody.append('<tr><td><span style="white-space: nowrap"><a href="javascript:angular.noop();" ng-click="getBGPdata(\'' + item.auftragsNr + '\')">' + item.auftragsNr + '</a></span></td></tr>');
      })
      // compiling all rows under tbody
      $compile(tbody[0])($scope)
      // adding only trs from tbody to DataTable
      mytable.rows.add(tbody[0].children).draw(false);
    }

also here is an updated JSFIDDLE with paging

Answer 2

It is not advisable to do service calls and DOM manipulation in controllers. For that you can use factory/service/proider and directive respectively.

I guess the issue is with mytable.row which is not at all holding the row instances that you've added. It should mytable.row(index).

So Instead of compiling mytable.row add all the rows and compile the table once with $compile(angular.element('#table1'))($scope);.

angular.module('myApp', [])
.controller('myCtrl', ['$scope','$filter','$http', '$compile', function($scope, $filter, $http,$compile) {
    $scope.myFunc = function() {        
            $http.get('http://localhost:9999/Angular_web/rest/main_search/byaufnum/').
            then(function(response) {
                var mytable = $('#table1').DataTable();
                response.data.map(function(item) {
                    mytable.row.add(['<span style=\'white-space: nowrap\'><a href=javascript:angular.noop(); ng-click=\"getBGPdata(\''+item.auftragsNr+'\')\">'+item.auftragsNr+'</a></span>']);
                });
                mytable.draw(false);
                $compile(angular.element('#table1'))($scope);
            }); 
    };

    $scope.getBGPdata = function(searchValue) {
        console.log('--> '+searchValue);
    };
}]);