Question

我有一个angular指令，其中包含表占位符的以下模板代码：

<table class="table table-striped table-bordered table-hover" id="testTableId">
    <thead>
        <tr>
            <th ng-repeat="column in columns">{{columns}}</th>
        </tr>
    </thead>
</table>

我试图从指令内的控制器中加载表格数据。

var table = $('#testTableId').DataTable({
                responsive: true,
                serverSide: true,
                ajax: {
                    url: myUrl,
                    dataSrc: ''
                },
                fnServerData: function (sSource, aoData, fnCallback, oSettings) 
                {
                    oSettings.jqXHR = $.ajax({
                        url: myUrl,
                        success: function (json, status, xhr) {
                            //Do stuff
                        }
                    });
                }    
            });

数据在表中加载，但我在控制台中出现以下错误：

TypeError：无法读取属性＆＃39; childNodes＆＃39;未定义的

我的表标题已经消失，如果我检查HTML，我可以看到我的ng-repeat指令已被注释掉。

请帮忙吗？

添加了：

如果我事先在指令之外渲染表格。将数据加载到表中可以正常工作。看起来像是某种时间问题。

Answer 1

我使用此问题的解决方案来解决问题：

enter link description here

在加载数据之前重复未完成似乎是一个问题。

Answer 2

这里的问题是您的选择器$('#testTableId')找不到该元素，导致var table = undefined。似乎停止执行其余代码。我的建议是避免使用jQuery来完成这项任务。您可以先加载数据，然后使用HTML处理它。

JS

app.controller('MainCtrl', function($scope) {
    $scope.data;
    $scope.columns = ['something', 'somethingElse'];

    activate();

    function activate() {
      getData();
    }

    function getData() {
      //Do your request to get the data
      yourRequest().then(function(response) {
        $scope.data = response;
      }); 
    }
});

HTML

<table class="table table-striped table-bordered table-hover" id="testTableId">
    <thead>
        <tr>
            <td ng-repeat="column in columns">{{columns}}</td>
        </tr>
    </thead>
    <tbody>
        <tr ng-repeat="row in data></tr>
    </tbody>
</table>

加载数据后，jQuery DataTable丢失列标题

2 个答案: