AngularJS – Jquery数据表为空

我正在尝试使用angular和jquery数据表显示数据表，但到目前为止，数据表在应用数据表函数后仍保持为空。

我已经读过，最好的方法是使用指令，但我不能让它工作。 这只是我设法让它工作是通过应用100毫秒的超时（超过100的时间不起作用）

我想要做的是在呈现DOM之后应用datatable函数。 我敢肯定有人设法做到了;）

userController.js

myApp.controller('UserController', ['$scope', 'User', function ($scope, User) { User.query(function(data) { $scope.users = data; }, function(errorData) { }); }]); 

datatableSetup.js

 myApp.directive('datatableSetup', ['$timeout', function ($timeout) { return { restrict: 'A', link: function (scope, elm, attrs) { $timeout(function() { elm.dataTable(); }, 100); } } }]); 

user.html

 
 
 
 
Username
 
Roles
 
 
 
 
 
{{user.username}}
 
 
 
 {{role}} 
 
 
 
  

Answer 1

在将DataTables插件与AngularJS集成并使用DOM作为数据源时，您需要等待DOM在调用’ dataTable() ‘之前完成渲染。

如果要检索要异步呈现的数据，则还需要等待该数据可用。

我的猜测是，在这种情况下，你使用的100ms延迟足以让这两个延迟完成。

要在DOM渲染之后运行某些东西，通常可以将调用包装在$timeout而不指定延迟。 这将把调用放在执行队列的末尾，当它运行时，Angular应该已经完成​​$ digest循环并且所有内容都应该被渲染：

 app.directive('datatableSetup', ['$timeout', function($timeout) { return { restrict: 'A', link: function(scope, element, attrs) { $timeout(function () { element.dataTable(); }); } } } ]); 

现在你需要确保：

1. 在异步调用的数据可用之前，不会编译该指令
2. 在异步调用的数据可用之前，指令链接中的$ timeout代码不会运行

如果你想要第一个路径，你可以在表元素上放置一个ng-if来延迟创建DOM部分（以及指令的编译），直到数据可用。 您可以检查users数组是否包含数据，或者只是在数据加载完成后将变量设置为true：

演示： http ： //plnkr.co/edit/Zx2E3cuqPFXe2nhqySXv？p =preview

对于第二条路线，有多种选择。 例如，您可以在使用时取消注册的链接function中使用观察程序，使用$ broadcast / $ emit甚至是服务或某些自定义通知系统。