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>