Skip to content
This repository was archived by the owner on May 29, 2019. It is now read-only.

Commit d65901c

Browse files
bekospkozlowski-opensource
bekos
authored and
pkozlowski-opensource
committedJan 13, 2014
feat(pagination): plug into ngModel controller
Closes #1545 BREAKING CHANGE: Both `pagination` and `pager` are now integrated with `ngModelController`. * `page` is replaced from `ng-model`. * `on-select-page` is removed since `ng-change` can now be used. Before: <pagination page="current" on-select-page="changed(page)" ...></pagination> After: <pagination ng-model="current" ng-change="changed()" ...></pagination>
·
v1.1.00.11.0
1 parent 27a642f commit d65901c

File tree

6 files changed

+71
-56
lines changed

6 files changed

+71
-56
lines changed
 

Diff for: ‎src/pagination/docs/demo.html

+7-7
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,19 @@
11
<div ng-controller="PaginationDemoCtrl">
22
<h4>Default</h4>
3-
<pagination total-items="totalItems" page="currentPage"></pagination>
4-
<pagination boundary-links="true" total-items="totalItems" page="currentPage" class="pagination-sm" previous-text="&lsaquo;" next-text="&rsaquo;" first-text="&laquo;" last-text="&raquo;"></pagination>
5-
<pagination direction-links="false" boundary-links="true" total-items="totalItems" page="currentPage"></pagination>
6-
<pagination direction-links="false" total-items="totalItems" page="currentPage" num-pages="smallnumPages"></pagination>
3+
<pagination total-items="totalItems" ng-model="currentPage" ng-change="pageChanged()"></pagination>
4+
<pagination boundary-links="true" total-items="totalItems" ng-model="currentPage" class="pagination-sm" previous-text="&lsaquo;" next-text="&rsaquo;" first-text="&laquo;" last-text="&raquo;"></pagination>
5+
<pagination direction-links="false" boundary-links="true" total-items="totalItems" ng-model="currentPage"></pagination>
6+
<pagination direction-links="false" total-items="totalItems" ng-model="currentPage" num-pages="smallnumPages"></pagination>
77
<pre>The selected page no: {{currentPage}}</pre>
88
<button class="btn btn-info" ng-click="setPage(3)">Set current page to: 3</button>
99

1010
<hr />
1111
<h4>Pager</h4>
12-
<pager total-items="totalItems" page="currentPage"></pager>
12+
<pager total-items="totalItems" ng-model="currentPage"></pager>
1313

1414
<hr />
1515
<h4>Limit the maximum visible buttons</h4>
16-
<pagination total-items="bigTotalItems" page="bigCurrentPage" max-size="maxSize" class="pagination-sm" boundary-links="true"></pagination>
17-
<pagination total-items="bigTotalItems" page="bigCurrentPage" max-size="maxSize" class="pagination-sm" boundary-links="true" rotate="false" num-pages="numPages"></pagination>
16+
<pagination total-items="bigTotalItems" ng-model="bigCurrentPage" max-size="maxSize" class="pagination-sm" boundary-links="true"></pagination>
17+
<pagination total-items="bigTotalItems" ng-model="bigCurrentPage" max-size="maxSize" class="pagination-sm" boundary-links="true" rotate="false" num-pages="numPages"></pagination>
1818
<pre>Page: {{bigCurrentPage}} / {{numPages}}</pre>
1919
</div>

Diff for: ‎src/pagination/docs/demo.js

+6-2
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,16 @@
11
var PaginationDemoCtrl = function ($scope) {
22
$scope.totalItems = 64;
33
$scope.currentPage = 4;
4-
$scope.maxSize = 5;
5-
4+
65
$scope.setPage = function (pageNo) {
76
$scope.currentPage = pageNo;
87
};
98

9+
$scope.pageChanged = function() {
10+
console.log('Page changed to: ' + $scope.currentPage);
11+
};
12+
13+
$scope.maxSize = 5;
1014
$scope.bigTotalItems = 175;
1115
$scope.bigCurrentPage = 1;
1216
};

Diff for: ‎src/pagination/docs/readme.md

+2-6
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ A lightweight pagination directive that is focused on ... providing pagination &
55

66
Settings can be provided as attributes in the `<pagination>` or globally configured through the `paginationConfig`.
77

8-
* `page` <i class="glyphicon glyphicon-eye-open"></i>
8+
* `ng-model` <i class="glyphicon glyphicon-eye-open"></i>
99
:
1010
Current page number. First page is 1.
1111

@@ -29,10 +29,6 @@ Settings can be provided as attributes in the `<pagination>` or globally configu
2929
_(Defaults: true)_ :
3030
Whether to keep current page in the middle of the visible ones.
3131

32-
* `on-select-page (page)`
33-
_(Default: null)_ :
34-
An optional expression called when a page is selected having the page number as argument.
35-
3632
* `direction-links`
3733
_(Default: true)_ :
3834
Whether to display Previous / Next buttons.
@@ -60,7 +56,7 @@ Settings can be provided as attributes in the `<pagination>` or globally configu
6056
### Pager Settings ###
6157

6258
Settings can be provided as attributes in the `<pager>` or globally configured through the `pagerConfig`.
63-
For `page`, `total-items`, `items-per-page`, `num-pages` and `on-select-page (page)` see pagination settings. Other settings are:
59+
For `ng-model`, `total-items`, `items-per-page` and `num-pages` see pagination settings. Other settings are:
6460

6561
* `align`
6662
_(Default: true)_ :

Diff for: ‎src/pagination/pagination.js

+30-15
Original file line numberDiff line numberDiff line change
@@ -2,9 +2,16 @@ angular.module('ui.bootstrap.pagination', [])
22

33
.controller('PaginationController', ['$scope', '$attrs', '$parse', '$interpolate', function ($scope, $attrs, $parse, $interpolate) {
44
var self = this,
5+
ngModelCtrl = { $setViewValue: angular.noop }, // nullModelCtrl
56
setNumPages = $attrs.numPages ? $parse($attrs.numPages).assign : angular.noop;
67

7-
this.init = function(defaultItemsPerPage) {
8+
this.init = function(ngModelCtrl_, defaultItemsPerPage) {
9+
ngModelCtrl = ngModelCtrl_;
10+
11+
ngModelCtrl.$render = function() {
12+
self.render();
13+
};
14+
815
if ($attrs.itemsPerPage) {
916
$scope.$parent.$watch($parse($attrs.itemsPerPage), function(value) {
1017
self.itemsPerPage = parseInt(value, 10);
@@ -36,16 +43,16 @@ angular.module('ui.bootstrap.pagination', [])
3643
};
3744

3845
this.render = function() {
39-
this.page = parseInt($scope.page, 10) || 1;
46+
this.page = parseInt(ngModelCtrl.$viewValue, 10) || 1;
4047
if (this.page > 0 && this.page <= $scope.totalPages) {
4148
$scope.pages = this.getPages(this.page, $scope.totalPages);
4249
}
4350
};
4451

4552
$scope.selectPage = function(page) {
4653
if ( ! self.isActive(page) && page > 0 && page <= $scope.totalPages) {
47-
$scope.page = page;
48-
$scope.onSelectPage({ page: page });
54+
ngModelCtrl.$setViewValue(page);
55+
ngModelCtrl.$render();
4956
}
5057
};
5158

@@ -63,7 +70,7 @@ angular.module('ui.bootstrap.pagination', [])
6370
if ( self.page > value ) {
6471
$scope.selectPage(value);
6572
} else {
66-
self.render();
73+
ngModelCtrl.$render();
6774
}
6875
});
6976
}])
@@ -83,14 +90,18 @@ angular.module('ui.bootstrap.pagination', [])
8390
return {
8491
restrict: 'EA',
8592
scope: {
86-
page: '=',
87-
totalItems: '=',
88-
onSelectPage:' &'
93+
totalItems: '='
8994
},
95+
require: ['pagination', '?ngModel'],
9096
controller: 'PaginationController',
9197
templateUrl: 'template/pagination/pagination.html',
9298
replace: true,
93-
link: function(scope, element, attrs, paginationCtrl) {
99+
link: function(scope, element, attrs, ctrls) {
100+
var paginationCtrl = ctrls[0], ngModel = ctrls[1];
101+
102+
if (!ngModel) {
103+
return; // do nothing if no ng-model
104+
}
94105

95106
// Setup configuration parameters
96107
var maxSize,
@@ -102,7 +113,7 @@ angular.module('ui.bootstrap.pagination', [])
102113
lastText = paginationCtrl.getAttributeValue(attrs.lastText, config.lastText, true),
103114
rotate = paginationCtrl.getAttributeValue(attrs.rotate, config.rotate);
104115

105-
paginationCtrl.init(config.itemsPerPage);
116+
paginationCtrl.init(ngModel, config.itemsPerPage);
106117

107118
if (attrs.maxSize) {
108119
scope.$parent.$watch($parse(attrs.maxSize), function(value) {
@@ -203,21 +214,25 @@ angular.module('ui.bootstrap.pagination', [])
203214
return {
204215
restrict: 'EA',
205216
scope: {
206-
page: '=',
207-
totalItems: '=',
208-
onSelectPage:' &'
217+
totalItems: '='
209218
},
219+
require: ['pager', '?ngModel'],
210220
controller: 'PaginationController',
211221
templateUrl: 'template/pagination/pager.html',
212222
replace: true,
213-
link: function(scope, element, attrs, paginationCtrl) {
223+
link: function(scope, element, attrs, ctrls) {
224+
var paginationCtrl = ctrls[0], ngModel = ctrls[1];
225+
226+
if (!ngModel) {
227+
return; // do nothing if no ng-model
228+
}
214229

215230
// Setup configuration parameters
216231
var previousText = paginationCtrl.getAttributeValue(attrs.previousText, config.previousText, true),
217232
nextText = paginationCtrl.getAttributeValue(attrs.nextText, config.nextText, true),
218233
align = paginationCtrl.getAttributeValue(attrs.align, config.align);
219234

220-
paginationCtrl.init(config.itemsPerPage);
235+
paginationCtrl.init(ngModel, config.itemsPerPage);
221236

222237
// Create page object used in template
223238
function makePage(number, text, isDisabled, isPrevious, isNext) {

Diff for: ‎src/pagination/test/pager.spec.js

+9-9
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ describe('pager directive', function () {
77
$rootScope = _$rootScope_;
88
$rootScope.total = 47; // 5 pages
99
$rootScope.currentPage = 3;
10-
element = $compile('<pager total-items="total" page="currentPage"></pager>')($rootScope);
10+
element = $compile('<pager total-items="total" ng-model="currentPage"></pager>')($rootScope);
1111
$rootScope.$digest();
1212
}));
1313

@@ -78,13 +78,13 @@ describe('pager directive', function () {
7878
expect($rootScope.currentPage).toBe(5);
7979
});
8080

81-
it('executes the `on-select-page` expression when an element is clicked', function() {
81+
it('executes the `ng-change` expression when an element is clicked', function() {
8282
$rootScope.selectPageHandler = jasmine.createSpy('selectPageHandler');
83-
element = $compile('<pager total-items="total" page="currentPage" on-select-page="selectPageHandler(page)"></pager>')($rootScope);
83+
element = $compile('<pager total-items="total" ng-model="currentPage" ng-change="selectPageHandler()"></pager>')($rootScope);
8484
$rootScope.$digest();
8585

8686
clickPaginationEl(-1);
87-
expect($rootScope.selectPageHandler).toHaveBeenCalledWith(4);
87+
expect($rootScope.selectPageHandler).toHaveBeenCalled();
8888
});
8989

9090
it('does not changes the number of pages when `total-items` changes', function() {
@@ -99,7 +99,7 @@ describe('pager directive', function () {
9999
describe('`items-per-page`', function () {
100100
beforeEach(inject(function() {
101101
$rootScope.perpage = 5;
102-
element = $compile('<pager total-items="total" items-per-page="perpage" page="currentPage"></pagination>')($rootScope);
102+
element = $compile('<pager total-items="total" items-per-page="perpage" ng-model="currentPage"></pagination>')($rootScope);
103103
$rootScope.$digest();
104104
}));
105105

@@ -133,7 +133,7 @@ describe('pager directive', function () {
133133
describe('`num-pages`', function () {
134134
beforeEach(inject(function() {
135135
$rootScope.numpg = null;
136-
element = $compile('<pager total-items="total" page="currentPage" num-pages="numpg"></pager>')($rootScope);
136+
element = $compile('<pager total-items="total" ng-model="currentPage" num-pages="numpg"></pager>')($rootScope);
137137
$rootScope.$digest();
138138
}));
139139

@@ -149,7 +149,7 @@ describe('pager directive', function () {
149149
pagerConfig.previousText = 'PR';
150150
pagerConfig.nextText = 'NE';
151151
pagerConfig.align = false;
152-
element = $compile('<pager total-items="total" page="currentPage"></pager>')($rootScope);
152+
element = $compile('<pager total-items="total" ng-model="currentPage"></pager>')($rootScope);
153153
$rootScope.$digest();
154154
}));
155155
afterEach(inject(function(pagerConfig) {
@@ -170,7 +170,7 @@ describe('pager directive', function () {
170170

171171
describe('override configuration from attributes', function () {
172172
beforeEach(inject(function() {
173-
element = $compile('<pager align="false" previous-text="<" next-text=">" total-items="total" page="currentPage"></pager>')($rootScope);
173+
element = $compile('<pager align="false" previous-text="<" next-text=">" total-items="total" ng-model="currentPage"></pager>')($rootScope);
174174
$rootScope.$digest();
175175
}));
176176

@@ -191,7 +191,7 @@ describe('pager directive', function () {
191191
it('changes "previous" & "next" text from interpolated attributes', function() {
192192
$rootScope.previousText = '<<';
193193
$rootScope.nextText = '>>';
194-
element = $compile('<pager align="false" previous-text="{{previousText}}" next-text="{{nextText}}" total-items="total" page="currentPage"></pager>')($rootScope);
194+
element = $compile('<pager align="false" previous-text="{{previousText}}" next-text="{{nextText}}" total-items="total" ng-model="currentPage"></pager>')($rootScope);
195195
$rootScope.$digest();
196196

197197
expect(getPaginationEl(0).text()).toBe('<<');

Diff for: ‎src/pagination/test/pagination.spec.js

+17-17
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ describe('pagination directive', function () {
77
$rootScope = _$rootScope_;
88
$rootScope.total = 47; // 5 pages
99
$rootScope.currentPage = 3;
10-
element = $compile('<pagination total-items="total" page="currentPage"></pagination>')($rootScope);
10+
element = $compile('<pagination total-items="total" ng-model="currentPage"></pagination>')($rootScope);
1111
$rootScope.$digest();
1212
}));
1313

@@ -125,7 +125,7 @@ describe('pagination directive', function () {
125125
describe('`items-per-page`', function () {
126126
beforeEach(inject(function() {
127127
$rootScope.perpage = 5;
128-
element = $compile('<pagination total-items="total" items-per-page="perpage" page="currentPage" on-select-page="selectPageHandler(page)"></pagination>')($rootScope);
128+
element = $compile('<pagination total-items="total" items-per-page="perpage" ng-model="currentPage"></pagination>')($rootScope);
129129
$rootScope.$digest();
130130
}));
131131

@@ -165,16 +165,16 @@ describe('pagination directive', function () {
165165
});
166166
});
167167

168-
describe('executes `on-select-page` expression', function () {
168+
describe('executes `ng-change` expression', function () {
169169
beforeEach(inject(function() {
170170
$rootScope.selectPageHandler = jasmine.createSpy('selectPageHandler');
171-
element = $compile('<pagination total-items="total" page="currentPage" on-select-page="selectPageHandler(page)"></pagination>')($rootScope);
171+
element = $compile('<pagination total-items="total" ng-model="currentPage" ng-change="selectPageHandler()"></pagination>')($rootScope);
172172
$rootScope.$digest();
173173
}));
174174

175175
it('when an element is clicked', function() {
176176
clickPaginationEl(2);
177-
expect($rootScope.selectPageHandler).toHaveBeenCalledWith(2);
177+
expect($rootScope.selectPageHandler).toHaveBeenCalled();
178178
});
179179
});
180180

@@ -198,7 +198,7 @@ describe('pagination directive', function () {
198198
$rootScope.total = 98; // 10 pages
199199
$rootScope.currentPage = 3;
200200
$rootScope.maxSize = 5;
201-
element = $compile('<pagination total-items="total" page="currentPage" max-size="maxSize"></pagination>')($rootScope);
201+
element = $compile('<pagination total-items="total" ng-model="currentPage" max-size="maxSize"></pagination>')($rootScope);
202202
$rootScope.$digest();
203203
}));
204204

@@ -267,7 +267,7 @@ describe('pagination directive', function () {
267267
$rootScope.currentPage = 7;
268268
$rootScope.maxSize = 5;
269269
$rootScope.rotate = false;
270-
element = $compile('<pagination total-items="total" page="currentPage" max-size="maxSize" rotate="rotate"></pagination>')($rootScope);
270+
element = $compile('<pagination total-items="total" ng-model="currentPage" max-size="maxSize" rotate="rotate"></pagination>')($rootScope);
271271
$rootScope.$digest();
272272
}));
273273

@@ -326,7 +326,7 @@ describe('pagination directive', function () {
326326

327327
describe('pagination directive with `boundary-links`', function () {
328328
beforeEach(inject(function() {
329-
element = $compile('<pagination boundary-links="true" total-items="total" page="currentPage"></pagination>')($rootScope);
329+
element = $compile('<pagination boundary-links="true" total-items="total" ng-model="currentPage"></pagination>')($rootScope);
330330
$rootScope.$digest();
331331
}));
332332

@@ -381,15 +381,15 @@ describe('pagination directive', function () {
381381
});
382382

383383
it('changes "first" & "last" text from attributes', function() {
384-
element = $compile('<pagination boundary-links="true" first-text="<<<" last-text=">>>" total-items="total" page="currentPage"></pagination>')($rootScope);
384+
element = $compile('<pagination boundary-links="true" first-text="<<<" last-text=">>>" total-items="total" ng-model="currentPage"></pagination>')($rootScope);
385385
$rootScope.$digest();
386386

387387
expect(getPaginationEl(0).text()).toBe('<<<');
388388
expect(getPaginationEl(-1).text()).toBe('>>>');
389389
});
390390

391391
it('changes "previous" & "next" text from attributes', function() {
392-
element = $compile('<pagination boundary-links="true" previous-text="<<" next-text=">>" total-items="total" page="currentPage"></pagination>')($rootScope);
392+
element = $compile('<pagination boundary-links="true" previous-text="<<" next-text=">>" total-items="total" ng-model="currentPage"></pagination>')($rootScope);
393393
$rootScope.$digest();
394394

395395
expect(getPaginationEl(1).text()).toBe('<<');
@@ -399,7 +399,7 @@ describe('pagination directive', function () {
399399
it('changes "first" & "last" text from interpolated attributes', function() {
400400
$rootScope.myfirstText = '<<<';
401401
$rootScope.mylastText = '>>>';
402-
element = $compile('<pagination boundary-links="true" first-text="{{myfirstText}}" last-text="{{mylastText}}" total-items="total" page="currentPage"></pagination>')($rootScope);
402+
element = $compile('<pagination boundary-links="true" first-text="{{myfirstText}}" last-text="{{mylastText}}" total-items="total" ng-model="currentPage"></pagination>')($rootScope);
403403
$rootScope.$digest();
404404

405405
expect(getPaginationEl(0).text()).toBe('<<<');
@@ -409,7 +409,7 @@ describe('pagination directive', function () {
409409
it('changes "previous" & "next" text from interpolated attributes', function() {
410410
$rootScope.previousText = '<<';
411411
$rootScope.nextText = '>>';
412-
element = $compile('<pagination boundary-links="true" previous-text="{{previousText}}" next-text="{{nextText}}" total-items="total" page="currentPage"></pagination>')($rootScope);
412+
element = $compile('<pagination boundary-links="true" previous-text="{{previousText}}" next-text="{{nextText}}" total-items="total" ng-model="currentPage"></pagination>')($rootScope);
413413
$rootScope.$digest();
414414

415415
expect(getPaginationEl(1).text()).toBe('<<');
@@ -419,7 +419,7 @@ describe('pagination directive', function () {
419419

420420
describe('pagination directive with just number links', function () {
421421
beforeEach(inject(function() {
422-
element = $compile('<pagination direction-links="false" total-items="total" page="currentPage"></pagination>')($rootScope);
422+
element = $compile('<pagination direction-links="false" total-items="total" ng-model="currentPage"></pagination>')($rootScope);
423423
$rootScope.$digest();
424424
}));
425425

@@ -471,7 +471,7 @@ describe('pagination directive', function () {
471471
describe('with just boundary & number links', function () {
472472
beforeEach(inject(function() {
473473
$rootScope.directions = false;
474-
element = $compile('<pagination boundary-links="true" direction-links="directions" total-items="total" page="currentPage"></pagination>')($rootScope);
474+
element = $compile('<pagination boundary-links="true" direction-links="directions" total-items="total" ng-model="currentPage"></pagination>')($rootScope);
475475
$rootScope.$digest();
476476
}));
477477

@@ -503,7 +503,7 @@ describe('pagination directive', function () {
503503
describe('`num-pages`', function () {
504504
beforeEach(inject(function() {
505505
$rootScope.numpg = null;
506-
element = $compile('<pagination total-items="total" page="currentPage" num-pages="numpg"></pagination>')($rootScope);
506+
element = $compile('<pagination total-items="total" ng-model="currentPage" num-pages="numpg"></pagination>')($rootScope);
507507
$rootScope.$digest();
508508
}));
509509

@@ -539,7 +539,7 @@ describe('pagination directive', function () {
539539
paginationConfig.previousText = 'PR';
540540
paginationConfig.nextText = 'NE';
541541
paginationConfig.lastText = 'LA';
542-
element = $compile('<pagination total-items="total" page="currentPage"></pagination>')($rootScope);
542+
element = $compile('<pagination total-items="total" ng-model="currentPage"></pagination>')($rootScope);
543543
$rootScope.$digest();
544544
}));
545545
afterEach(inject(function(paginationConfig) {
@@ -561,7 +561,7 @@ describe('pagination directive', function () {
561561

562562
describe('override configuration from attributes', function () {
563563
beforeEach(inject(function() {
564-
element = $compile('<pagination boundary-links="true" first-text="<<" previous-text="<" next-text=">" last-text=">>" total-items="total" page="currentPage"></pagination>')($rootScope);
564+
element = $compile('<pagination boundary-links="true" first-text="<<" previous-text="<" next-text=">" last-text=">>" total-items="total" ng-model="currentPage"></pagination>')($rootScope);
565565
$rootScope.$digest();
566566
}));
567567

0 commit comments

Comments
 (0)
This repository has been archived.