ng-view加载Adminator模板Bootstrap数据表格异常问题咨询

嘿，我之前在做AngularJS项目用Adminator模板的时候也踩过这个坑！你的问题根源很明确：Datatable的初始化时机和ng-view的DOM渲染时机不匹配。

当你不用ng-view时，表格DOM在页面初始加载时就已经存在，全局的$(document).ready()里的Datatable初始化脚本能顺利找到元素并渲染；但用ng-view时，表格是路由切换完成后才动态插入到DOM中的，这时候页面初始的ready事件早就触发过了，初始化代码根本找不到目标表格元素，自然就显示不出来。

下面给你两个靠谱的解决方案：

方案1：在路由对应的Controller中延迟初始化 #

在负责渲染表格页面的Controller里，用$timeout确保DOM已经渲染完成后，再手动初始化Datatable：

angular.module('yourAppName').controller('TablePageController', function($scope, $timeout) {
    // $timeout(..., 0)会让代码在AngularJS的digest循环结束后执行，此时DOM已更新
    $timeout(function() {
        // 替换成你表格的ID
        $('#data-table').DataTable({
            // 这里可以照搬Adminator模板里的Datatable配置
            responsive: true,
            pagingType: "full_numbers",
            language: {
                search: "_INPUT_",
                searchPlaceholder: "Search records..."
            }
        });
    }, 0);
});

方案2：封装成AngularJS指令（更优雅，复用性强） #

写一个自定义指令，让它在表格元素渲染到DOM后自动初始化Datatable，还能处理路由切换时的销毁逻辑，避免内存泄漏：

angular.module('yourAppName').directive('adminDatatable', function() {
    return {
        restrict: 'A',
        link: function(scope, element) {
            // 初始化Datatable
            const dataTableInstance = $(element).DataTable({
                responsive: true,
                paging: true,
                searching: true,
                // 其他Adminator默认配置
            });

            // 当路由切换、Controller销毁时，销毁Datatable实例
            scope.$on('$destroy', function() {
                dataTableInstance.destroy();
            });
        }
    };
});

然后在你的表格HTML里加上这个指令：

<table id="data-table" class="table table-striped table-bordered" admin-datatable>
    <!-- 表头和表格内容 -->
</table>

额外要注意的点 #

• 确保Adminator的依赖加载顺序正确：先引入jQuery，再引入Datatable的JS和CSS文件，最后加载你的AngularJS代码；
• 删掉全局$(document).ready()里针对这个表格的初始化代码，避免冲突；
• 如果你的路由开启了缓存，记得在切换路由时强制刷新表格的初始化逻辑。

按照上面的方法改完后，切换到包含表格的路由时，Datatable就能正常渲染出来了！

内容的提问来源于stack exchange，提问作者Steve