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>

JScript中

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

您需要确保在角度消化页面后调用数据表.像这样的东西:

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

}

然而,以这种方式平直混合角度和jquery是一个可怕的想法.你真的应该写一个angular指令来包装jquery插件,或者根本就不使用jQuery.