Skip to content

Commit bce2505

Browse files
bekosbekos
committed
refactor(pagination): move boundary & directions to the template
Closes angular-ui#795 Closes angular-ui#1770
1 parent c01d255 commit bce2505

3 files changed

Lines changed: 58 additions & 91 deletions

File tree

‎src/pagination/pagination.js‎

Lines changed: 51 additions & 89 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,13 @@
11
angular.module('ui.bootstrap.pagination', [])
22

3-
.controller('PaginationController', ['$scope', '$attrs', '$parse', '$interpolate', function ($scope, $attrs, $parse, $interpolate) {
3+
.controller('PaginationController', ['$scope', '$attrs', '$parse', function ($scope, $attrs, $parse) {
44
var self = this,
55
ngModelCtrl = { $setViewValue: angular.noop }, // nullModelCtrl
66
setNumPages = $attrs.numPages ? $parse($attrs.numPages).assign : angular.noop;
77

8-
this.init = function(ngModelCtrl_, defaultItemsPerPage) {
8+
this.init = function(ngModelCtrl_, config) {
99
ngModelCtrl = ngModelCtrl_;
10+
this.config = config;
1011

1112
ngModelCtrl.$render = function() {
1213
self.render();
@@ -18,52 +19,44 @@ angular.module('ui.bootstrap.pagination', [])
1819
$scope.totalPages = self.calculateTotalPages();
1920
});
2021
} else {
21-
this.itemsPerPage = defaultItemsPerPage;
22+
this.itemsPerPage = config.itemsPerPage;
2223
}
2324
};
2425

25-
this.noPrevious = function() {
26-
return this.page === 1;
27-
};
28-
this.noNext = function() {
29-
return this.page === $scope.totalPages;
30-
};
31-
32-
this.isActive = function(page) {
33-
return this.page === page;
34-
};
35-
3626
this.calculateTotalPages = function() {
3727
var totalPages = this.itemsPerPage < 1 ? 1 : Math.ceil($scope.totalItems / this.itemsPerPage);
3828
return Math.max(totalPages || 0, 1);
3929
};
4030

41-
this.getAttributeValue = function(attribute, defaultValue, interpolate) {
42-
return angular.isDefined(attribute) ? (interpolate ? $interpolate(attribute)($scope.$parent) : $scope.$parent.$eval(attribute)) : defaultValue;
43-
};
44-
4531
this.render = function() {
46-
this.page = parseInt(ngModelCtrl.$viewValue, 10) || 1;
47-
if (this.page > 0 && this.page <= $scope.totalPages) {
48-
$scope.pages = this.getPages(this.page, $scope.totalPages);
49-
}
32+
$scope.page = parseInt(ngModelCtrl.$viewValue, 10) || 1;
5033
};
5134

5235
$scope.selectPage = function(page) {
53-
if ( ! self.isActive(page) && page > 0 && page <= $scope.totalPages) {
36+
if ( $scope.page !== page && page > 0 && page <= $scope.totalPages) {
5437
ngModelCtrl.$setViewValue(page);
5538
ngModelCtrl.$render();
5639
}
5740
};
5841

42+
$scope.getText = function( key ) {
43+
return $scope[key + 'Text'] || self.config[key + 'Text'];
44+
};
45+
$scope.noPrevious = function() {
46+
return $scope.page === 1;
47+
};
48+
$scope.noNext = function() {
49+
return $scope.page === $scope.totalPages;
50+
};
51+
5952
$scope.$watch('totalItems', function() {
6053
$scope.totalPages = self.calculateTotalPages();
6154
});
6255

6356
$scope.$watch('totalPages', function(value) {
6457
setNumPages($scope.$parent, value); // Readonly variable
6558

66-
if ( self.page > value ) {
59+
if ( $scope.page > value ) {
6760
$scope.selectPage(value);
6861
} else {
6962
ngModelCtrl.$render();
@@ -82,34 +75,34 @@ angular.module('ui.bootstrap.pagination', [])
8275
rotate: true
8376
})
8477

85-
.directive('pagination', ['$parse', 'paginationConfig', function($parse, config) {
78+
.directive('pagination', ['$parse', 'paginationConfig', function($parse, paginationConfig) {
8679
return {
8780
restrict: 'EA',
8881
scope: {
89-
totalItems: '='
82+
totalItems: '=',
83+
firstText: '@',
84+
previousText: '@',
85+
nextText: '@',
86+
lastText: '@'
9087
},
9188
require: ['pagination', '?ngModel'],
9289
controller: 'PaginationController',
9390
templateUrl: 'template/pagination/pagination.html',
9491
replace: true,
9592
link: function(scope, element, attrs, ctrls) {
96-
var paginationCtrl = ctrls[0], ngModel = ctrls[1];
93+
var paginationCtrl = ctrls[0], ngModelCtrl = ctrls[1];
9794

98-
if (!ngModel) {
95+
if (!ngModelCtrl) {
9996
return; // do nothing if no ng-model
10097
}
10198

10299
// Setup configuration parameters
103-
var maxSize = paginationCtrl.getAttributeValue(attrs.maxSize, config.maxSize ),
104-
boundaryLinks = paginationCtrl.getAttributeValue(attrs.boundaryLinks, config.boundaryLinks ),
105-
directionLinks = paginationCtrl.getAttributeValue(attrs.directionLinks, config.directionLinks ),
106-
firstText = paginationCtrl.getAttributeValue(attrs.firstText, config.firstText, true),
107-
previousText = paginationCtrl.getAttributeValue(attrs.previousText, config.previousText, true),
108-
nextText = paginationCtrl.getAttributeValue(attrs.nextText, config.nextText, true),
109-
lastText = paginationCtrl.getAttributeValue(attrs.lastText, config.lastText, true),
110-
rotate = paginationCtrl.getAttributeValue(attrs.rotate, config.rotate);
100+
var maxSize = angular.isDefined(attrs.maxSize) ? scope.$parent.$eval(attrs.maxSize) : paginationConfig.maxSize,
101+
rotate = angular.isDefined(attrs.rotate) ? scope.$parent.$eval(attrs.rotate) : paginationConfig.rotate;
102+
scope.boundaryLinks = angular.isDefined(attrs.boundaryLinks) ? scope.$parent.$eval(attrs.boundaryLinks) : paginationConfig.boundaryLinks;
103+
scope.directionLinks = angular.isDefined(attrs.directionLinks) ? scope.$parent.$eval(attrs.directionLinks) : paginationConfig.directionLinks;
111104

112-
paginationCtrl.init(ngModel, config.itemsPerPage);
105+
paginationCtrl.init(ngModelCtrl, paginationConfig);
113106

114107
if (attrs.maxSize) {
115108
scope.$parent.$watch($parse(attrs.maxSize), function(value) {
@@ -119,16 +112,15 @@ angular.module('ui.bootstrap.pagination', [])
119112
}
120113

121114
// Create page object used in template
122-
function makePage(number, text, isActive, isDisabled) {
115+
function makePage(number, text, isActive) {
123116
return {
124117
number: number,
125118
text: text,
126-
active: isActive,
127-
disabled: isDisabled
119+
active: isActive
128120
};
129121
}
130122

131-
paginationCtrl.getPages = function(currentPage, totalPages) {
123+
function getPages(currentPage, totalPages) {
132124
var pages = [];
133125

134126
// Default page limits
@@ -158,42 +150,32 @@ angular.module('ui.bootstrap.pagination', [])
158150

159151
// Add page number links
160152
for (var number = startPage; number <= endPage; number++) {
161-
var page = makePage(number, number, paginationCtrl.isActive(number), false);
153+
var page = makePage(number, number, number === currentPage);
162154
pages.push(page);
163155
}
164156

165157
// Add links to move between page sets
166158
if ( isMaxSized && ! rotate ) {
167159
if ( startPage > 1 ) {
168-
var previousPageSet = makePage(startPage - 1, '...', false, false);
160+
var previousPageSet = makePage(startPage - 1, '...', false);
169161
pages.unshift(previousPageSet);
170162
}
171163

172164
if ( endPage < totalPages ) {
173-
var nextPageSet = makePage(endPage + 1, '...', false, false);
165+
var nextPageSet = makePage(endPage + 1, '...', false);
174166
pages.push(nextPageSet);
175167
}
176168
}
177169

178-
// Add previous & next links
179-
if (directionLinks) {
180-
var previousPage = makePage(currentPage - 1, previousText, false, paginationCtrl.noPrevious());
181-
pages.unshift(previousPage);
182-
183-
var nextPage = makePage(currentPage + 1, nextText, false, paginationCtrl.noNext());
184-
pages.push(nextPage);
185-
}
186-
187-
// Add first & last links
188-
if (boundaryLinks) {
189-
var firstPage = makePage(1, firstText, false, paginationCtrl.noPrevious());
190-
pages.unshift(firstPage);
170+
return pages;
171+
}
191172

192-
var lastPage = makePage(totalPages, lastText, false, paginationCtrl.noNext());
193-
pages.push(lastPage);
173+
var originalRender = paginationCtrl.render;
174+
paginationCtrl.render = function() {
175+
originalRender();
176+
if (scope.page > 0 && scope.page <= scope.totalPages) {
177+
scope.pages = getPages(scope.page, scope.totalPages);
194178
}
195-
196-
return pages;
197179
};
198180
}
199181
};
@@ -206,47 +188,27 @@ angular.module('ui.bootstrap.pagination', [])
206188
align: true
207189
})
208190

209-
.directive('pager', ['pagerConfig', function(config) {
191+
.directive('pager', ['pagerConfig', function(pagerConfig) {
210192
return {
211193
restrict: 'EA',
212194
scope: {
213-
totalItems: '='
195+
totalItems: '=',
196+
previousText: '@',
197+
nextText: '@'
214198
},
215199
require: ['pager', '?ngModel'],
216200
controller: 'PaginationController',
217201
templateUrl: 'template/pagination/pager.html',
218202
replace: true,
219203
link: function(scope, element, attrs, ctrls) {
220-
var paginationCtrl = ctrls[0], ngModel = ctrls[1];
204+
var paginationCtrl = ctrls[0], ngModelCtrl = ctrls[1];
221205

222-
if (!ngModel) {
206+
if (!ngModelCtrl) {
223207
return; // do nothing if no ng-model
224208
}
225209

226-
// Setup configuration parameters
227-
var previousText = paginationCtrl.getAttributeValue(attrs.previousText, config.previousText, true),
228-
nextText = paginationCtrl.getAttributeValue(attrs.nextText, config.nextText, true),
229-
align = paginationCtrl.getAttributeValue(attrs.align, config.align);
230-
231-
paginationCtrl.init(ngModel, config.itemsPerPage);
232-
233-
// Create page object used in template
234-
function makePage(number, text, isDisabled, isPrevious, isNext) {
235-
return {
236-
number: number,
237-
text: text,
238-
disabled: isDisabled,
239-
previous: ( align && isPrevious ),
240-
next: ( align && isNext )
241-
};
242-
}
243-
244-
paginationCtrl.getPages = function(currentPage) {
245-
return [
246-
makePage(currentPage - 1, previousText, paginationCtrl.noPrevious(), true, false),
247-
makePage(currentPage + 1, nextText, paginationCtrl.noNext(), false, true)
248-
];
249-
};
210+
scope.align = angular.isDefined(attrs.align) ? scope.$parent.$eval(attrs.align) : pagerConfig.align;
211+
paginationCtrl.init(ngModelCtrl, pagerConfig);
250212
}
251213
};
252214
}]);

‎template/pagination/pager.html‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
11
<ul class="pager">
2-
<li ng-repeat="page in pages track by $index" ng-class="{disabled: page.disabled, previous: page.previous, next: page.next}"><a href ng-click="selectPage(page.number)">{{page.text}}</a></li>
2+
<li ng-class="{disabled: noPrevious(), previous: align}"><a href ng-click="selectPage(page - 1)">{{getText('previous')}}</a></li>
3+
<li ng-class="{disabled: noNext(), next: align}"><a href ng-click="selectPage(page + 1)">{{getText('next')}}</a></li>
34
</ul>

‎template/pagination/pagination.html‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,7 @@
11
<ul class="pagination">
2-
<li ng-repeat="page in pages track by $index" ng-class="{active: page.active, disabled: page.disabled}"><a href ng-click="selectPage(page.number)">{{page.text}}</a></li>
2+
<li ng-if="boundaryLinks" ng-class="{disabled: noPrevious()}"><a href ng-click="selectPage(1)">{{getText('first')}}</a></li>
3+
<li ng-if="directionLinks" ng-class="{disabled: noPrevious()}"><a href ng-click="selectPage(page - 1)">{{getText('previous')}}</a></li>
4+
<li ng-repeat="page in pages track by $index" ng-class="{active: page.active}"><a href ng-click="selectPage(page.number)">{{page.text}}</a></li>
5+
<li ng-if="directionLinks" ng-class="{disabled: noNext()}"><a href ng-click="selectPage(page + 1)">{{getText('next')}}</a></li>
6+
<li ng-if="boundaryLinks" ng-class="{disabled: noNext()}"><a href ng-click="selectPage(totalPages)">{{getText('last')}}</a></li>
37
</ul>

0 commit comments

Comments
 (0)