jquery - AngularJS Datatables 使用 SignalR 获取数据

Question

我已经使用 Jquery Datatables 插件和 Jquery 相当一段时间了，现在我尝试转而使用 AngularJS 和 SignalR，而不是在浏览器之间进行实时更新。我正在看Angular-datatables尝试将 Angular 实现到数据表中(我读过这并不是那么容易)但我无法让它工作。

简化后的表格如下所示。可能不是解决所有问题的最漂亮的方法，因为我对 AngularJS 很陌生。

<div ng-controller="ActionEditController">
    <table id="actionsTable" datatable="" dt-options="dtOptions" dt-column-defs="dtColumnDefs" class="table table-striped table-hover">
        <thead>
            <tr>
                <th>Field A</th>
                <th>Field B</th>
                <th>Field C</th>
                <th>Field D</th>
                <th>Field E</th>
                <th>Field F</th>
            </tr>
        </thead>
        <tbody>
            <tr ng-show="isNew()">
                <td>
                    <select data-ng-options="item.name as item.name for item in options" data-ng-model="add_action.Status" class="form-control"></select>
                </td>
                <td><input type="text" class="form-control" ng-model="add_action.Description" /></td>
                <td><input type="text" class="form-control" ng-model="add_action.Responsible" /></td>
                <td><input type="text" class="form-control" datetimepicker ng-model="add_action.Deadline" /></td>
                <td><input type="text" class="form-control" datetimepicker ng-model="add_action.Executed" /></td>
                <td width="60">
                    <button name="updateButton" ng-click="add()" ng-show="isNew()" class="btn btn-xs btn-default"><i class="fa fa-save"></i></button>
                    <button name="deleteButton" ng-click="delete(action)" ng-show="!isNew()" class="btn btn-xs btn-default"><i class="fa fa-trash-o"></i></button>
                    <button name="cancelButton" ng-click="abort()" ng-show="isNew()" class="btn btn-xs btn-default"><i class="fa fa-times"></i></button>
                </td>
            </tr>
            <tr ng-repeat="action in actions">
                <td ng-show="!isEdit(action)">{{action.Status}}</td>
                <td ng-show="isEdit(action)">
                    <select data-ng-options="item.name as item.name for item in options" data-ng-model="edit_action.Status" class="form-control"></select>
                </td>
                <td ng-show="!isEdit(action)">{{action.Description}}</td>
                <td ng-show="isEdit(action)"><input type="text" class="form-control" ng-model="edit_action.Description" /></td>
                <td ng-show="!isEdit(action)">{{action.Responsible}}</td>
                <td ng-show="isEdit(action)"><input type="text" class="form-control" ng-model="edit_action.Responsible" /></td>
                <td ng-show="!isEdit(action)">{{action.Deadline | date : 'dd.MM.yyyy HH:mm'}}</td>
                <td ng-show="isEdit(action)"><input type="text" class="form-control" datetimepicker ng-model="edit_action.Deadline" /></td>
                <td ng-show="!isEdit(action)">{{action.Executed | date : 'dd.MM.yyyy HH:mm'}}</td>
                <td ng-show="isEdit(action)"><input type="text" class="form-control" datetimepicker ng-model="edit_action.Executed" /></td>
                <td width="60">
                    <button name="editButton" ng-click="edit(action)" ng-show="!action.IsLocked" class="btn btn-xs btn-default"><i class="fa fa-pencil"></i></button>
                    <button name="updateButton" ng-click="update()" ng-show="isEdit(action)" class="btn btn-xs btn-default"><i class="fa fa-save"></i></button>
                    <button name="deleteButton" ng-click="delete(action)" ng-show="!action.IsLocked" class="btn btn-xs btn-default"><i class="fa fa-trash-o"></i></button>
                    <button name="cancelButton" ng-click="cancel()" ng-show="isEdit(action)" class="btn btn-xs btn-default"><i class="fa fa-times"></i></button>
                </td>
            </tr>
        </tbody>
    </table>
</div>

所以 SignalR 的基本情况是，它在页面打开时运行此方法。

public override async Task OnConnected()
        {
            var query = from f in _db.Actions
                        orderby f.FieldB
                        select new { 
                            FieldA= f.FieldA, 
                            FieldB= f.FieldB,
                            FieldC= f.FieldC,
                            FieldD= f.FieldD,
                            FieldE= f.FieldE,
                            FieldF= f.FieldF
                        };

            await Clients.Caller.all(query);
            await Clients.Caller.allLocks(_locks.Values);
        }

Controller 的连接方式如下:

var app = angular.module('app', ['datatables', 'ngResource']);
app.controller("ActionEditController", ["$scope", "DTOptionsBuilder", "DTColumnDefBuilder", ActionEditController]);

在调用此方法的客户端上，它运行这两个方法。这只是检查锁并将其应用到范围。

hubProxy.client.all = function (actions) {
    $scope.actions = actions;
}
hubProxy.client.allLocks = function (locks) {
        for (i = 0; i < $scope.actions.length; i++) {
            $scope.actions[i].IsLocked = false;
        }
        for (i = 0; i < locks.length; i++) {
            for (j = 0; j < $scope.actions.length; j++) {
                if (locks[i] === $scope.actions[j].Id) {
                    $scope.actions[j].IsLocked = true;
                    break;
                }
            }
        }
        $scope.loading = false;
        $scope.$apply();
    }

问题来了。如何将其与数据表插件或 Angular 数据表插件联系起来？我已经尝试了很多尝试使用这些示例，但无法让它工作。非常感谢任何帮助:)

Answer 1

您的代码似乎是正确的，尽管服务器对象和客户端对象看起来并不相同(不同的属性)。

一些事情 - 假设它是您想要绑定(bind)到表的“操作”:

• 在从服务器返回之前调用 ToList() - 因为您可能没有获取实际的枚举列表，而是获取 IQueryable 对象
• 运行 $scope.$apply(function(){ $scope.actions = actions;});因为您没有在那里应用，并且它可能不会更新 View (无法告诉您从哪里运行它)。