Javascript AngularJS与jQuery数据表间歇工作

我将AngularJS添加到一个严重依赖于jQuery的datatables插件的项目中

在我的角度视图中，我有datatables代码（仅在加载视图时加载）

例：

$（'#datatable'）.datatable（）

在我的布局中，由服务器呈现（其他所有内容都由客户端呈现），我为每个JavaScript文件提供了
标记

但是，当我加载页面时，所有的数据都没有分页，当我单击一个分类器（向上或向下）时，我看到我的角度模板，即
{{record.name}
和
{{record.time}
在第一行，我的数据消失了

使用jQuery datatables的唯一表是一个记录量非常小的表（6）。即使如此，它也会断断续续地工作

这让我相信，在脚本执行之前/之后（取决于数据量）加载一些数据是有问题的

我知道有很多替代方案和指令，但我还没有找到一个能够正常工作并完成本机插件所有功能的替代方案和指令。所以，请不要向我推荐这些

如果数据/脚本的加载顺序有问题，并且一个需要先加载另一个，我可以添加一个延迟，直到所有内容都完成加载

这似乎是问题所在吗？我如何测试这个

编辑：

需要注意的另一点是：当所有内容都完成加载后，我在控制台中输入
$（'#datatable'）.datatable（）它应用所有datatables功能

我的角度视图中的datatables代码被一个
$（function（）{//code}）包围

这是我获取数据（每个表）的方式：

然后我在表的
上运行一个
ng repeat
，指令是包装外部库的正确方法，因此这就是您希望调用DataTable的方式。我以前没有在Angular中使用jquery DataTables，因为它有点反模式（虽然我理解这在这里是不可避免的），但是如果它只是在正确的时间调用$（）.DataTables（）的情况，然后这个指令应该可以做到这一点——记住jquery和datatables的标记应该包含在angular.js之前，以便angular在内部用jquery替换jqlite——这样，这里的元素参数会自动用jquery包装元素，并且应该允许您调用DataTable函数

angular.module('yourModule').directive('datatable', function() {
  return {
    restrict: 'AC',
    link: function(scope, element, attrs) {
      element.DataTable();
    }
  }
});

使用该指令，而不是给您的表一个ID#datatable，只需添加一个“datatable”类或属性，然后让该指令从那里处理它
 很难说没有代码可供参考。然而，我建立了一个指令来处理我的各种自定义数据表，它们工作得很好，所以你可能不想放弃这个选项。它只是角度视图中的数据表，周围是
$（function（）{}）我会看一看指令，但这并不是我所说的我真正想要的。当你说'the'指令时，你是在说使用预构建指令吗？这可能就是为什么你不喜欢它。我的指令是为我要显示的表定制的，使用datatables提供的功能我没有遇到任何问题。另外，当我将HTML放入表中而不是通过API端点加载时，没有问题。我也有同样的问题，数据显示在表中，但datatables无法识别。这很可能与以异步方式提供的数据有关。基本上，您需要等待启动DataTables函数，直到数据准备就绪。我编写了一个快速plunk，它在指令中使用承诺，因此在“ready”属性中看到真实值之前不会触发DataTables（）：另一种方法是将表本身的标记作为指令中的角度模板，并通过隔离范围将数据传递到指令中。这样做，您可以对scope采取类似的方法。$watch等待数据进入指令中-这也会使在数据更改时更容易正确地重新提交，而我上面的示例指令没有设置来处理。哈哈-对于可能遇到此问题的任何其他人，plunk已经做了一些修改，可以使用Angular 1.2.5
angular.module('yourModule').directive('datatable', function() {
  return {
    restrict: 'AC',
    link: function(scope, element, attrs) {
      element.DataTable();
    }
  }
});