$scope 更改后数据表未正确刷新
Datatable doesn't refresh correctly after $scope change
您好,我遇到了 Angular 和数据 table 的问题。我有 table 个项目,当 socket.io 事件出现时,我更改了 $scope。问题是,datatable 更改了 $scope,但它保留了前十项。所以例如我有 20 个项目,然后我删除了一个,socket.io 事件返回告诉我。 $scope 刷新但 datatable 现在有 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 服务。所以我得到了数据但是刷新数据table 不能正常工作。
删除前
删除后
谢谢你的帮助
编辑
忘记说了。我的 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);
}
};
}]);
所以我用一个普通列表测试了它,这个列表进行了更新。数据table更新为但保留前十个元素,我不知道为什么。
我用
解决了这个问题
$timeout( function() {$scope.allUser = user;}, 100);
感谢同时删除的答案。
您好,我遇到了 Angular 和数据 table 的问题。我有 table 个项目,当 socket.io 事件出现时,我更改了 $scope。问题是,datatable 更改了 $scope,但它保留了前十项。所以例如我有 20 个项目,然后我删除了一个,socket.io 事件返回告诉我。 $scope 刷新但 datatable 现在有 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 服务。所以我得到了数据但是刷新数据table 不能正常工作。
删除前
删除后
谢谢你的帮助
编辑
忘记说了。我的 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);
}
};
}]);
所以我用一个普通列表测试了它,这个列表进行了更新。数据table更新为但保留前十个元素,我不知道为什么。
我用
解决了这个问题 $timeout( function() {$scope.allUser = user;}, 100);
感谢同时删除的答案。