AngularJS 不将数据传递给 JQuery DataTable

Question

我正在使用来自 datatables.net 的数据表，并且在 AngularJS ng-repeat 和填充到表中的值方面遇到了一些问题。我添加了一个按钮，可以将值传递到表中，效果很好。但是，当我尝试向表格添加排序和滚动条时，它停止工作。我不确定我在这里做错了什么。

html

<div ng-controller="TodoCtrl" id="TodoCtrl">
        <table id="example" cellpadding="0" cellspacing="0" border="0" class="display table table-striped table-bordered table-condensed">
        <thead>
            <tr>
            <th>Bus Id</th>
            <th>X Cords</th>
            <th>Y Cords</th>
            <th>Event Type</th>
            <th>Time Stamp</th>
            </tr>
        </thead>
        <tbody>
            <tr ng-repeat="todo in todos"><td>{{todo.busId}}</td><td>{{todo.xCord}}</td><td>{{todo.yCord}}</td><td>{{todo.eventType}}</td><td>{{todo.timeStamp}}</td></tr>
        </tbody>
        </table>
        <form class="form-horizontal">
        <input type="text" ng-model="vbusId" ng-model-instant>
        <button class="btn" ng-click="addTodo()"><i class="icon-plus"></i>Add</button>
    </div>

j脚本

function TodoCtrl($scope) { 
    $scope.todos = [];

    $scope.addTodo = function (vbusId, vxCord, vyCord, vposTimeStamp, veventType) {
        $scope.todos.push({busId:'vbusId', xCord:vxCord, yCord:vyCord, timeStamp:vposTimeStamp, eventType:veventType});
            }

}

表格脚本

$(document).ready(function() {
    $('#example').dataTable( {
        "sScrollY": "200px",
        "bPaginate": false
    } );
} );

如果我注释掉表脚本，动态表就会工作并填充传递的数据。如果我取消注释表代码，表将显示排序和滚动条，但它不会接受这些值。有人能告诉我我错过了什么吗？

非常感谢!

Answer 1

您需要确保在 Angular 消化页面后调用数据表。像这样的事情:

function TodoCtrl($scope, $timeout) { 
    $scope.todos = [];

    $scope.addTodo = function (vbusId, vxCord, vyCord, vposTimeStamp, veventType) {
        $scope.todos.push({busId:'vbusId', xCord:vxCord, yCord:vyCord, timeStamp:vposTimeStamp, eventType:veventType});
            }

    $timeout(function(){
        $('#example').dataTable( {
            "sScrollY": "200px",
            "bPaginate": false
        } );
    }, 0, false);

}

但是，以这种方式平面混合 Angular 和 jquery 是一个糟糕的主意。您确实应该编写一个 Angular 指令来包装 jquery 插件，或者根本不使用 jQuery。