angularjs - 使用 socket.io 进行数据更新的 jQuery DataTables 娱乐

Question

我在AngularJS上使用带有socket.io的jQuery DataTables，并且我将一个项目推送到套接字消息上的数据绑定(bind)列表并随后进行消化。当它发生时，数据表会重新创建自己，而不是仅仅更新数据并且无法正常工作。我也随机得到错误 * Warning: Cannot reinitialise DataTable ，当我这样做时，数据表无法显示。

JavaScript

var app = angular.module('App', ['ui.bootstrap','ngAnimate', 'datatables']);
app.factory('socket', function () {
    var socket = io.connect('http://' + document.domain + ':' + location.port + '/t');
    return socket;
});

app.controller('controller', function ($scope, socket, $timeout, DTOptionsBuilder, DTColumnBuilder) {
    $scope.data=[];
    $scope.headers = {'Name':'name','Title','title'}
    socket.on('data', function (d) {
        d = angular.fromJson(d);
        $scope.data.push(d);
        $scope.$digest();
    });

    $scope.dtOptions = DTOptionsBuilder.newOptions().withPaginationType('full_numbers').withOption('bInfo', false);
    $scope.dtColumns = [];
    $scope.dtInstance = {};

    for (key in $scope.headers) {
        $scope.dtColumns.push(DTColumnBuilder.newColumn($scope.headers[key]).withTitle(key));
    }
});

HTML

    <table id="tbl" datatable="ng" dt-options="dtOptions" dt-columns="dtColumns" dt-instance="dtInstance"
           class="table table-striped row-border hover">
        <tr class="fade" ng-model="d"
            ng-repeat="d in data">

Answer 1

您错过了标题文字中的冒号:

$scope.headers = {'Name':'name','Title' : 'title'}
                                        ^

希望将 JSON 项推送到 data是有效的，完整的标记是:

<table id="tbl" datatable="ng" dt-options="dtOptions" dt-columns="dtColumns" dt-instance="dtInstance" class="table table-striped row-border hover">
   <thead></thead>
   <tbody>
       <tr class="fade" ng-model="d" ng-repeat="d in data">
          <td>{{ d.name }}</td>
          <td>{{ d.title }}</td>
       </tr>
   </tbody>
</table>

使用 rerender()而不是 §digest (为什么是 §digest？):

socket.on('data', function (d) {
    d = angular.fromJson(d);
    $scope.data.push(d);
    $scope.dtInstance.rerender();
});