AngularJS 和 DataTables 集成答案

【问题标题】：AngularJS and DataTables integrationAngularJS 和 DataTables 集成
【发布时间】：2016-01-04 23:09:14
【问题描述】：

我正在向 DataTable 添加一个新行，但 AngularJS 没有拾取它。任何人都可以展示如何将这两者联系起来吗？基本上，我需要新行的行为与原始行一样，即执行 callGetRow 函数。非常感谢任何帮助。

<html ng-app>
<head>
    <title>Example</title>

    <script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
    <script src="http://cdn.datatables.net/1.10.10/js/jquery.dataTables.min.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.min.js"></script>

<script>
function RESTCall($scope, $http) {  
    $scope.callGetRow = function(line) {
        alert(line);
    };

    $scope.callAddNew = function() {
        $('#example').DataTable().row.add(["2.0","Item 2", "Generic Desc", "2", 200]).draw();
    };      
}

</script>       
</head>

<body>

<div ng-controller="RESTCall">
    <table class="compact" id="example" cellspacing="0" >
        <thead>
            <tr>
                <th></th>
                <th>Item</th>
                <th>Description</th>
                <th>Qty</th>
                <th>List $</th>
            </tr>
        </thead>

        <tbody>
            <tr ng-click="callGetRow('1/0')" id="1.0">
                <td>1.0</td>
                <td>Item 1</td>
                <td>Generic Description</td>
                <td>3</td>
                <td>100</td>
            </tr>
        </tbody>
    </table>

<button class="btn" type="button" ng-click="callAddNew()">Add new</button>
</div>
</body>
</html>

【问题讨论】：

有一个用于 Angular 的数据表插件 - 可能对您有所帮助：l-lin.github.io/angular-datatables

标签： jquery angularjs datatables

【解决方案1】：

我不赞成，但可能你需要在$('#example').DataTable().row.add(["2.0", "Item 2", "Generic Desc", "2", 200]).draw(); 之后加上一个$scope.$apply()

【讨论】：

感谢您的尝试，但没有成功：错误：$apply 已在进行中

【解决方案2】：

解决方案在下面的示例中。基本上，我必须使用 DataTable 添加删除添加行并使用 AngularJS 创建内容、编译它并使用 JQuery 将其添加到我的 HTML 中的选择器中。

需要做的事情：

删除 DataTables 代码
将我的函数放入控制器并注入我需要的 Angular 服务（范围、编译、元素）
使用AngularJS创建内容并编译
将类名添加到 tbody 以便 JQuery 将新行追加到

<html ng-app="problemApp">
<head>
    <title>Example</title>

    <script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
    <script src="http://cdn.datatables.net/1.10.10/js/jquery.dataTables.min.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.min.js"></script>
    <link href="http://cdn.datatables.net/1.10.11/css/jquery.dataTables.min.css" rel="stylesheet" />

<script>

    var myApp = angular.module("problemApp", []);

    myApp.controller("RESTCall", function ($scope, $compile, $element) {

        $scope.callGetRow = function(line) {
            alert(line);
        };

        $scope.callAddNew = function() {

            //define the element 
            $scope.content = "<tr ng-click=\"callGetRow('2/0')\" id=\"2.0\"><td>2.0</td><td>Item 2</td><td>Generic Description 2</td><td>1</td><td>200</td></tr>";

            //wrap it in jqLite
            var tblElem = angular.element($scope.content);

            //create a function to generate content
            var compileFn = $compile(tblElem);

            //execute the compilation function
            compileFn($scope);

            // add to DOM
            $( ".toappend" ).append(tblElem);
        };      

    });

    $(document).ready( function() {
      $('#example').dataTable();
    } );

</script>       
</head>

<body>

<div ng-controller="RESTCall">
    <table class="compact" id="example">
        <thead>
            <tr>
                <th></th>
                <th>Item</th>
                <th>Description</th>
                <th>Qty</th>
                <th>List $</th>
            </tr>
        </thead>

        <tbody class="toappend">
            <tr ng-click="callGetRow('1/0')" id="1.0">
                <td>1.0</td>
                <td>Item 1</td>
                <td>Generic Description</td>
                <td>3</td>
                <td>100</td>
            </tr>
        </tbody>
    </table>

<button class="btn" type="button" ng-click="callAddNew()">Add new</button>
</div>
</body>
</html>

【讨论】：