从数据库中删除记录后无法锻炼如何重新加载 angular-datatable

Question

从数据库中删除记录后，我似乎不知道如何重绘 Angular-Datatable。我没有收到任何错误，但 table 似乎永远不会重绘，除非我手动刷新页面。我一直在尝试使用网站文档中的许多示例。

我有我的数据table:

            $scope.dtInstance = {};
            $scope.selectedItems = [];
            $scope.toggleItem = toggleItem;
            $scope.reloadData = reloadData;

            // Build the User table
            $scope.dtOptions = DTOptionsBuilder
                .fromFnPromise(function() {
                    var deferred = $q.defer();
                    deferred.resolve(users); 
                    return deferred.promise;
                })
                .withBootstrap() // Style with Bootstrap
                .withOption('responsive', true) 
                .withDisplayLength(15) // Show 15 items initially
                .withOption('order', [0, 'asc']) // Sort by the first column
                .withOption('lengthMenu', [15, 50, 100]) // Set the length menu items
                .withOption('createdRow', function(row, data, dataIndex) {
                    // Recompiling so we can bind Angular directive to the DT
                    $compile(angular.element(row).contents())($scope);
                })
                .withOption('headerCallback', function(header) {
                    if (!$scope.headerCompiled) {
                        // Use this headerCompiled field to only compile header once
                        $scope.headerCompiled = true;
                        $compile(angular.element(header).contents())($scope);
                    }
                })              
                .withOption('fnRowCallback', formatCell);
            $scope.dtColumns = [
                DTColumnBuilder.newColumn(null).withTitle('Username').withClass('col-md-2').renderWith(createUsernameHyperlink), 
                DTColumnBuilder.newColumn('Email').withTitle('Email'), 
                DTColumnBuilder.newColumn('Level').withTitle('Role').withClass('col-md-2'),
                DTColumnBuilder.newColumn('LastConnected').withTitle('Last Accessed'), 
                DTColumnBuilder.newColumn('Verified').withTitle('Account Verified').withClass('col-md-2'), 
                DTColumnBuilder.newColumn(null).withTitle('')
                    .notSortable()
                    .renderWith(function(data, type, full, meta) {
                        return '<input type="checkbox" ng-click="toggleItem(' + data.Id + ')" />';
                    }).withClass("text-center")     
            ];

        // Reload the datatable
        function reloadData() {

            var resetPaging = false;
            $scope.dtInstance.reloadData(callback, resetPaging);

        };  

        function callback(json) {
            console.log(json);
        };

然后我的删除功能位于同一个控制器中。在服务成功响应时调用 reloadData()。我可以从 console.log 中看到它正在正确调用该函数，但没有任何反应。

$scope.deleteUser = function( selectedItems ) {

            swal({
                title: 'Are you sure?', 
                text: 'Are you sure you want to delete the selected account profile(s)? This process cannot be undone...', 
                type: 'warning', 
                showCancelButton: true, 
                confirmButtonText: 'Delete', 
                confirmButtonColor: "#DD6B55", 
                closeOnConfirm: false, 
                allowEscapeKey: true, 
                showLoaderOnConfirm: true
            }, function() {

                setTimeout( function() {

                    // Delete user
                    UsersService.deleteUser( selectedItems.toString() )
                        .then(function( data ) {
                            // Show a success modal
                            swal({
                                title: 'Success', 
                                text: 'User has been deleted!', 
                                type: 'success', 
                                confirmButtonText: 'Close', 
                                allowEscapeKey: false
                            }, function() {

                                reloadData(); //<== Calls the function but doesn't do anything
                                //$state.go('users');

                            });
                        }, function() {
                            // Show an error modal
                            swal({
                                title: 'Oops', 
                                text: 'Something went wrong!', 
                                type: 'error', 
                                confirmButtonText: 'Close', 
                                allowEscapeKey: true
                            });
                        }); 

                }, 1000);   

            });

        };

只是想知道我是否错过了某些步骤？

Answer 1

setTimeout 函数在 angular 摘要周期之外工作，因为它是异步的。如果您希望在超时内执行的操作适用于 angular 摘要周期，您应该使用 $timeout。

另一种选择是使用 $scope.apply()，但这只会模仿 $timeout 函数。

请注意，您需要将 $timeout 注入您的控制器。

Answer 2

正如@davidkonrad 在之前的评论中以及 Angular-Datatable 的作者所建议的那样，我在尝试重绘我的 [=30= 时没有重新加载我的内容].即使我从注入的服务中引用我的数据 (users)，它也从未在控制器中更新，所以我的 table 内容从来没有不同。

作者建议最好从发出 HTTP 请求的承诺中加载数据，这样每次 table 重绘时都可以进一步调用承诺。

所以不是这个：

// Build the User table
            $scope.dtOptions = DTOptionsBuilder
                .fromFnPromise(function() {
                    var deferred = $q.defer();
                    deferred.resolve(users); 
                    return deferred.promise;
                })
                .withBootstrap() // Style with Bootstrap

我改成了这样：

// Build the User table
            $scope.dtOptions = DTOptionsBuilder
                .fromFnPromise(function() {
                    return UsersService.getUsers();
                })
                .withBootstrap() // Style with Bootstrap

现在通过调用 $scope.dtInstance.reloadData();

更新我的 table 每次重绘事件

我的Githubpost可以找到here

从数据库中删除记录后无法锻炼如何重新加载 angular-datatable

Can't workout how to reload angular-datatable after deleting records from the database

datatables

angularjs

angular-datatables