尝试为ngTable制作自定义指令,但我不知道如何使用更新的数据重新渲染

时间:2014-07-11 18:23:13

标签: javascript angularjs angularjs-directive ngtable

我认为我需要的是重新渲染表格或者在客户端加载后完成该事实的东西。我在指令中尝试$scope.$apply(),但它抱怨已经发生$摘要周期。我还尝试了内置reload()的ngTableParams,但似乎没有做任何事情。在我的指令中,data以一个空数组开始,但之后不久就填充了大约20个项目。它只是不会显示那些更新的结果。


<div class="row">
    <j-table data="clients" search="search" class="table small-8 columns end">
        <td data-title="'Name'" sortable="'last'">
            <span>{{client.first || 'no name'}}</span>
            <span>{{client.last || ''}}</span>
        </td>
        <td data-title="'Address'" sortable="'city'">{{client | formatAddress}}</td>
    </j-table>
</div>

angular.module('locqusAngular').directive('jTable', function () {
    return {
        restrict: 'E',
        transclude: true,
        scope: {
            data: '=',
            search: '='
        },
        template:
            '<table ng-table="tableParams"> \
                <tr ng-repeat="d in $data | filter:search.term"> \
                    <div ng-transclude></div> \
                </tr> \
            </table>',
        controller: function ($scope, $filter, ngTableParams) {
            $scope.tableParams = new ngTableParams({
                page: 1,
                count: 10,
                sorting: {
                    name: 'asc',
                    filter: $scope.search
                },
                filter: {}
            }, {
                total: $scope.data.length,
                getData: function ($defer, params) {
                    var orderedData = params.sorting() ? $filter('orderBy')($scope.data, params.orderBy()) : $scope.data;
                    $defer.resolve(orderedData.slice((params.page() - 1) * params.count(), params.page() * params.count()));
                }
            });

            $scope.$watch('data.length', function(newx, oldx) {
                if (newx != null && newx !== oldx && newx > 0) {
                    $scope.tableParams.reload();
                }
            });
        },
    }
})

0 个答案:

没有答案