如果使用row.add，则ng-click不能与AngularJS和jquery dataTables一起使用

Question

我是angualrjs的新手，我正在使用带有angularJS的jQuery DataTable指令，它正常工作。我面临的问题是将javascript函数添加到＆＃34; TR＆＃34;动态地使用＆＃34; ng-click＆＃34;这是行不通的。似乎动态添加的元素无法被角度识别。

有人可以帮我解决这个问题。

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解决该问题，但不知道如何在上面的代码中添加此问题。

以下是redering表的HTML

<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

修改

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