Stuck Stuck - 1 year ago 66
AngularJS Question

dirPagination does not work (Angular JS pagination)

I am trying to use dirPagination but it does not work. See my code in action:

My code:

<!DOCTYPE html>
<html ng-app="myApp">
<link data-require="bootstrap-css@3.1.1" data-semver="3.1.1" rel="stylesheet" href="" />
<script data-require="angular.js@1.3.0-beta.5" data-semver="1.3.0-beta.5" src=""></script>
<script data-require="jquery@*" data-semver="2.0.3" src=""></script>
<script data-require="bootstrap@3.1.1" data-semver="3.1.1" src=""></script>

var myApp = angular.module('myApp', [])
.controller('PsCtrl', ['$scope', function ($scope) {
$ = [
{a:1, b:1},
{a:2, b:2},
{a:3, b:3}

<script src="dirPagination.js"></script>

<div ng-controller="PsCtrl">
ItemCount: {{data.length}}
<li dir-paginate="item in data | itemsPerPage: 2">{{ item }}</li>

I only get this as output:

ItemCount: 3

But I would expect pagination controls at the bottom and this output as a first page:

ItemCount: 3
⋅ {"a":1,"b":1}
⋅ {"a":2,"b":2}

When I use
<li ng-repeat="item in data">{{ item }}</li>
it shows the correct list.

What am I doing wrong?

Answer Source

All you need to run your plnkr is to include dirPaginate into your angular module:

var myApp = angular.module('myApp', ['angularUtils.directives.dirPagination'])

And change path to pagination HTML template in dirpagination.js:155 to

templateUrl:  'dirPagination.tpl.html',