Question

我正在尝试使用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>

Answer 1

将DataTables插件与AngularJS集成并使用DOM作为数据源时，您需要等待DOM完成呈现，然后才能调用＆＃39; dataTable()＆＃39;。

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

我的猜测是，在这种情况下，你使用的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甚至是服务或某些自定义通知系统。

AngularJS - Jquery数据表为空

1 个答案: