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

对于表格占位符，我有一个带有以下模板代码的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>

数据加载到表中，但控制台中有以下错误：

TypeError:无法读取未定义的属性“childNodes”

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

请帮忙

增加：

---

如果我在指令之外预先呈现表。将数据加载到表中是可行的。看起来这是某种时间问题。

这里的问题是选择器$'testTableId'找不到元素，导致var table=未定义。这似乎停止了其余代码的执行。我的建议是避免将jQuery用于此任务。您可以先加载数据，然后使用HTML进行处理

JS

HTML

---

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

---

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

否，$'testTableId'确实找到了元素。正如我提到的数据加载，因此DataTable调用中的代码是正确的。

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
                        }
                    });
                }    
            });

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;
      }); 
    }
});

<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>