javascript – 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
<table datatable-setup="" class="table table-bordered table-striped">
<thead>
<tr>
<th>Username</th>
<th>Roles</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="user in users">
<td>{{user.username}}</td>
<td>
<ul>
<li ng-repeat="role in user.roles">
{{role}}
</li>
</ul>
</td>
</tr>
</table>
解决方法:
在将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();
});
}
}
}
]);
现在你需要确保:
>在异步调用的数据可用之前,不会编译该指令
>在异步调用的数据可用之前,指令链接中的$timeout代码不会运行
如果你想要第一个路径,你可以在表元素上放置一个ng-if来延迟创建DOM部分(以及指令的编译),直到数据可用.您可以检查users数组是否包含数据,或者只是在数据加载完成后将变量设置为true:
<table ng-if="users.length" datatable-setup class="table table-bordered table-striped">
演示:http://plnkr.co/edit/Zx2E3cuqPFXe2nhqySXv?p=preview
对于第二条路线,有多种选择.例如,您可以在使用时取消注册的链接功能中使用观察程序,使用$broadcast / $emit甚至是服务或某些自定义通知系统.
标签:javascript,jquery,angularjs,jquery-datatables 来源: https://codeday.me/bug/20190825/1715919.html