在 AngularJS 指令中创建的数据表与数据分离

Question

我正在尝试将数据表与 angularjs 一起使用，到目前为止我见过的最好的方法是在指令中，所以这是我的指令示例：

adminApp.directive('tableExample', function(adminUserREST) {
return {
    restrict: 'E',
    templateUrl: 'templates/adminApp/directives/tableTemplate.jsp',
    replace: true,
    scope: true,
    controller: function($scope) {
          $scope.adminUsers = adminUserREST.getAllAdminUsers();
    },
    link: function(scope, elements, attrs) {
        var table = $("#sample_editable_1");
        var oTable = table.dataTable({
            "lengthMenu": [
                [5, 10, 15, 20, -1],
                [5, 10, 15, 20, "All"]
            ],
            "pageLength": 10,
            "columnDefs": [{
                'orderable': true,
                'targets': [0]
            }, {
                "searchable": true,
                "targets": [0]
            }],
            "order": [
                [0, "asc"]
            ]
        });
    }
}
});

这是模板：

<div>
<table class="table table-striped table-hover table-bordered" id="sample_editable_1">
    <thead>
        <tr>
            <th>
                 Username
            </th>
            <th>
                 Full Name
            </th>
            <th>
                 Points
            </th>
            <th>
                 Notes
            </th>
            <th>
                 Edit
            </th>
            <th>
                 Delete
            </th>
        </tr>
    </thead>
    <tbody>
        <tr ng-repeat="adminUser in adminUsers | orderBy:'username'">
            <td>
                 {{ adminUser.username }}
            </td>
            <td>
                {{ adminUser.password }}
            </td>
            <td>
                 {{ adminUser.fullName }}
            </td>
            <td class="center">
                 {{ adminUser.notes }}
            </td>
            <td>
                <a class="edit" href="javascript:;">
                Edit </a>
            </td>
            <td>
                <a class="delete" href="javascript:;">
                Delete </a>
            </td>
        </tr>
    </tbody>
</table>
</div>

adminUserREST 是一个返回 adminUser 对象列表的 REST 服务。这里的问题似乎是在 ng-repeat 完成操作 DOM 之前调用了 table.dataTable({...}) 。最终结果是一个表格，通过 ng-repeat 填充了正确的行，但由于它看到 0 个结果而被数据表功能断开。

有什么帮助吗？

Answer 1

因为你的 REST 服务调用了 http，所以它一定是一个 promise。你必须在 promise 解决后和 ng-repeat 的 DOM 更新之后创建你的 dataTable（所以我把它放在 $timeout 中）：

adminApp.directive('tableExample', function ($timeout, adminUserREST) {
    return {
        restrict: 'E',
        templateUrl: 'templates/adminApp/directives/tableTemplate.jsp',
        replace: true,
        scope: true,
        link: function (scope, elements, attrs) {
            adminUserREST.getAllAdminUsers().then(function (response) {
                scope.adminUsers = response;
                $timeout(function(){
                  var table = $("#sample_editable_1");
                  var oTable = table.dataTable({
                      "lengthMenu": [
                          [5, 10, 15, 20, -1],
                          [5, 10, 15, 20, "All"]
                      ],
                          "pageLength": 10,
                          "columnDefs": [{
                          'orderable': true,
                              'targets': [0]
                      }, {
                          "searchable": true,
                              "targets": [0]
                      }],
                          "order": [
                          [0, "asc"]
                      ]
                  });
                });
            });
        }
    }
});