ng-click не работает с AngularJS и jquery dataTables, если используется row.add

Question

Я новичок в angualrjs, я использую директиву jQuery DataTable с angularJS, которая работает нормально. Проблема, с которой я столкнулся, заключается в добавлении функции javascript в «TR» динамически с «ng-click», который не работает. Кажется, что динамически добавленные элементы не распознаются угловыми.

Может кто-нибудь помочь мне решить эту проблему.

Есть много вопросов в Stackoverflow и упомянутом решении, которое я уже пробовал, но не работает. Я использую метод jQuery row.add для пополнения строк.

Вы можете найти код, который я использую

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

Я знаю, что эта проблема может быть решена с помощью $compile and $scope, но не знаете, как добавить это в коде выше.

Ниже приведен HTML из redering таблицы

<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

вопрос компиляции mytable, которая не является DOM элемент (его DataTable объект экземпляра)

так что вам нужно сделать это как этот

 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 

рабочий пример JSFIDDLE

EDIT

DataTables будет отображать только первую страницу изначально, поэтому, когда вы применяете $compile(table)($scope);, его можно скомпилировать только строки первой страницы, а не все строки (так как они еще не отображаются).

, чтобы решить эту проблему, вам нужно собрать все строки перед добавлением их в 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); 
    } 

также здесь является обновленным JSFIDDLE с пейджинговой

Answer 2

Не рекомендуется делать вызовы служб и DOM манипуляции в контроллерах. Для этого вы можете использовать factory/service/proider и directive соответственно.

Я думаю, проблема связана с mytable.row, который вообще не содержит экземпляры строк, которые вы добавили. Он должен mytable.row(index).

Итак, вместо компиляции mytable.row добавьте все строки и скомпилируйте таблицу один раз с помощью $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); 
    }; 
}]);