[英]AngularJS - Jquery datatable empty
我正在尝试使用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();
});
}
}
}
]);
现在你需要确保:
如果你想要第一个路径,你可以在表元素上放置一个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甚至是服务或某些自定义通知系统。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.