1

Estou tentando criar uma diretiva que utiliza o ngTable para fazer a paginação das minhas tabelas, porém, não obtive sucesso.

Abstrai o código angular que é utilizado para fazer a paginação, jogando-o dentro de uma diretiva, para que não tenha que ficar replicando esse código nas demais telas.

A pergunta é, o que está faltando para que a diretiva funcione corretamente?

Segue abaixo como ficou o código:

Diretiva

angular.module('directiveApp', ['ngTable']).directive('pagination', ['ngTableParams', function(ngTableParams) {
    return {
        templateUrl:'/table.html',
        restrict: 'A',
        replace: true,
        transclude: true,
        scope: {
            list: '=' \\objeto JSON
        },
        controller: function($scope) {
            var data = [];
            for (var element in $scope.list) {
                data.push($scope.list[element]);
            }               
            $scope.tableParams = new ngTableParams({
                page: 1,            // show first page
                count: 10           // count per page
            }, {
                total: data.length, // length of data
                getData: function($defer, params) {
                    $defer.resolve(data.slice((params.page() - 1) * params.count(), params.page() * params.count()));
                }
            });
        }
    };
}]);

table.html - utilizada na diretiva

<table data-ng-table="tableParams" class="table" data-ng-transclude></table>

Controller

angular.module('myApp', [])
.controller('myController', ['$scope', function($scope) {
    $scope.listaPessoas = [{id: 1, nome:'Pessoa 1'},
                    {id: 2, nome:'Pessoa 2'},
                    {id: 3, nome:'Pessoa 3'},
                    {id: 4, nome:'Pessoa 4'},
                    {id: 5, nome:'Pessoa 5'},
                    {id: 6, nome:'Pessoa 6'},
                    {id: 7, nome:'Pessoa 7'},
                    {id: 8, nome:'Pessoa 8'},
                    {id: 9, nome:'Pessoa 9'},
                    {id: 10, nome:'Pessoa 10'},
                    {id: 11, nome:'Pessoa 11'}]; }]);

tela.html - tela de teste

<table pagination list="listaPessoas">
    <tr data-ng-repeat="pessoa in $data">
        <td data-title="'Nome'" ng-bind="pessoa.nome"></td>
    </tr>
</table>
3
  • Qual o erro encontrado? Commented 1/05/2015 às 3:09
  • Vínicius, o problema que ocorre é que o objeto '$data' não é preenchido. Ele fica vazio. O segundo problema é que não aparece a paginação (mesmo não tendo elemento ele deveria mostra os botões de escolher quantos registros aparecer por pagina). O objeto 'tableParams' fica undefined
    – user24468
    Commented 2/05/2015 às 20:12

0

Você deve fazer log-in para responder a esta pergunta.

Pesquise outras perguntas com a tag .