【问题标题】:Datatable doesn't refresh correctly after $scope change$scope 更改后数据表无法正确刷新
【发布时间】:2015-10-18 20:00:12
【问题描述】:

您好,我对 Angular 和 Datatables 有疑问。我有一个项目表,当 socket.io 事件出现时,我更改了 $scope。问题是,数据表更改了 $scope,但它保留了前十项。所以例如我有 20 个项目,然后我删除了一个,然后一个 socket.io 事件回来告诉我。 $scope 刷新,但数据表现在有 29 个项目(20 - 1 个新项目 + 10 个旧项目)。

这是我的代码,也许有人有解决方案。

顺便说一句。抱歉我的英语不好,希望你能理解我的问题。

HTML

<table datatable="ng" dt-options="dtOptions" dt-columns="dtColumns" dt-instance="nested.dtInstance" class="table table-striped table-bordered table-hover dataTables-example">
                            <thead>
                            <tr>
                                <th>Name</th>
                                <th>Email</th>

                            </tr>
                            </thead>
                            <tbody>
                            <tr ng-repeat="tuser in allUser" ng-if="tuser.id != user.id">
                                <td>{{tuser.firstname}} {{tuser.lastname}}</td>
                                <td>{{tuser.email}}</td>

                            </tr>

                            </tbody>
                        </table>

还有我的控制器部分

function userCtrl($scope, $http, CSRF_TOKEN, SweetAlert, $location, DTOptionsBuilder, authUser, ws) {

ws.on('connect', function() {
    ws.on('userChange', function (user) {

        $scope.allUser = user;

    });
});

$scope.dtOptions = DTOptionsBuilder.newOptions()
        .withLanguageSource("//cdn.datatables.net/plug-ins/9dcbecd42ad/i18n/German.json");

var onUserComplete = function(response) {
        $scope.allUser = response.data;

    };

var getUserData = function() {

    $http.get("/api/getuserlist")
    .then(function successCallback(response) {
        onUserComplete(response);
    }, function errorCallback(response) {
        getUserData();
    });
}; ......

ws 是 socket.io 服务。所以我得到数据但刷新数据表不能正常工作。

删除前

删除后

感谢您的帮助

编辑

我忘了说。我的 socket.io 服务在更改后应用 $scope...

module.factory('ws', [ '$rootScope', function ($rootScope) {
    'use strict';
    var socket = io.connect("http://localhost:8890");

    return {
        emit: function (event, data, callback) {
            socket.emit(event, data, function () {
                    var args = arguments;
                    $rootScope.$apply(function () {
                        if (callback) {
                            callback.apply(null, args);
                        }
                        });
                    });
               },
        on: function (event, callback) {
            socket.on(event, function () {
                var args = arguments;
                $rootScope.$apply(function () {
                    callback.apply(null, args);
                });
            });
        },
        off: function (event, callback) {
            socket.removeListener(event, callback);
        }
    };
}]);

所以我用一个普通的列表对其进行了测试,这个列表进行了更新。数据表更新为但保留了前十个元素,我不知道为什么。

【问题讨论】:

    标签: javascript jquery angularjs socket.io angular-datatables


    【解决方案1】:

    我用

    解决了这个问题
     $timeout( function() {$scope.allUser = user;}, 100);
    

    感谢同时删除的答案。

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 2015-04-30
      • 1970-01-01
      • 2012-12-11
      • 1970-01-01
      • 1970-01-01
      • 2021-10-11
      • 1970-01-01
      • 1970-01-01
      相关资源
      最近更新 更多