feat(pager): move to separate component
- Separate pager into its own component Closes #4935
This commit is contained in:
@@ -0,0 +1,4 @@
|
||||
<div ng-controller="PagerDemoController">
|
||||
<h4>Pager</h4>
|
||||
<uib-pager total-items="totalItems" ng-model="currentPage"></uib-pager>
|
||||
</div>
|
||||
@@ -0,0 +1,4 @@
|
||||
angular.module('ui.bootstrap.demo').controller('PagerDemoCtrl', function($scope) {
|
||||
$scope.totalItems = 64;
|
||||
$scope.currentPage = 4;
|
||||
});
|
||||
@@ -0,0 +1,26 @@
|
||||
A lightweight pager directive that is focused on providing previous/next paging functionality
|
||||
|
||||
### Pager Settings ###
|
||||
|
||||
Settings can be provided as attributes in the `<uib-pager>` or globally configured through the `uibPagerConfig`.
|
||||
For `ng-model`, `total-items`, `items-per-page` and `num-pages` see pagination settings. Other settings are:
|
||||
|
||||
* `align`
|
||||
_(Default: true)_ :
|
||||
Whether to align each link to the sides.
|
||||
|
||||
* `previous-text`
|
||||
_(Default: '« Previous')_ :
|
||||
Text for Previous button.
|
||||
|
||||
* `next-text`
|
||||
_(Default: 'Next »')_ :
|
||||
Text for Next button.
|
||||
|
||||
* `template-url`
|
||||
_(Default: 'template/pagination/pager.html') :
|
||||
Override the template for the component with a custom provided template
|
||||
|
||||
* `ng-disabled` <i class="glyphicon glyphicon-eye-open"></i>
|
||||
:
|
||||
Used to disable the pager component
|
||||
@@ -0,0 +1,37 @@
|
||||
angular.module('ui.bootstrap.pager', ['ui.bootstrap.pagination'])
|
||||
|
||||
.constant('uibPagerConfig', {
|
||||
itemsPerPage: 10,
|
||||
previousText: '« Previous',
|
||||
nextText: 'Next »',
|
||||
align: true
|
||||
})
|
||||
|
||||
.directive('uibPager', ['uibPagerConfig', function(pagerConfig) {
|
||||
return {
|
||||
restrict: 'EA',
|
||||
scope: {
|
||||
totalItems: '=',
|
||||
previousText: '@',
|
||||
nextText: '@',
|
||||
ngDisabled: '='
|
||||
},
|
||||
require: ['uibPager', '?ngModel'],
|
||||
controller: 'UibPaginationController',
|
||||
controllerAs: 'pagination',
|
||||
templateUrl: function(element, attrs) {
|
||||
return attrs.templateUrl || 'uib/template/pager/pager.html';
|
||||
},
|
||||
replace: true,
|
||||
link: function(scope, element, attrs, ctrls) {
|
||||
var paginationCtrl = ctrls[0], ngModelCtrl = ctrls[1];
|
||||
|
||||
if (!ngModelCtrl) {
|
||||
return; // do nothing if no ng-model
|
||||
}
|
||||
|
||||
scope.align = angular.isDefined(attrs.align) ? scope.$parent.$eval(attrs.align) : pagerConfig.align;
|
||||
paginationCtrl.init(ngModelCtrl, pagerConfig);
|
||||
}
|
||||
};
|
||||
}]);
|
||||
@@ -1,7 +1,7 @@
|
||||
describe('pager directive', function() {
|
||||
var $compile, $rootScope, $document, $templateCache, body, element;
|
||||
beforeEach(module('ui.bootstrap.pagination'));
|
||||
beforeEach(module('uib/template/pagination/pager.html'));
|
||||
beforeEach(module('ui.bootstrap.pager'));
|
||||
beforeEach(module('uib/template/pager/pager.html'));
|
||||
beforeEach(inject(function(_$compile_, _$rootScope_, _$document_, _$templateCache_) {
|
||||
$compile = _$compile_;
|
||||
$rootScope = _$rootScope_;
|
||||
@@ -54,7 +54,7 @@ describe('pager directive', function() {
|
||||
});
|
||||
|
||||
it('exposes the controller on the template', function() {
|
||||
$templateCache.put('uib/template/pagination/pager.html', '<div>{{pagination.text}}</div>');
|
||||
$templateCache.put('uib/template/pager/pager.html', '<div>{{pagination.text}}</div>');
|
||||
|
||||
element = $compile('<uib-pager></uib-pager>')($rootScope);
|
||||
$rootScope.$digest();
|
||||
@@ -21,8 +21,4 @@
|
||||
<uib-pagination total-items="bigTotalItems" ng-model="bigCurrentPage" max-size="maxSize" class="pagination-sm" boundary-link-numbers="true" rotate="false"></uib-pagination>
|
||||
<pre>Page: {{bigCurrentPage}} / {{numPages}}</pre>
|
||||
|
||||
<hr />
|
||||
<h4>Pager</h4>
|
||||
<uib-pager total-items="totalItems" ng-model="currentPage"></uib-pager>
|
||||
|
||||
</div>
|
||||
|
||||
@@ -72,28 +72,3 @@ Settings can be provided as attributes in the `<uib-pagination>` or globally con
|
||||
* `template-url`
|
||||
_(Default: 'uib/template/pagination/pagination.html')_ :
|
||||
Override the template for the component with a custom provided template
|
||||
|
||||
### Pager Settings ###
|
||||
|
||||
Settings can be provided as attributes in the `<uib-pager>` or globally configured through the `uibPagerConfig`.
|
||||
For `ng-model`, `total-items`, `items-per-page` and `num-pages` see pagination settings. Other settings are:
|
||||
|
||||
* `align`
|
||||
_(Default: true)_ :
|
||||
Whether to align each link to the sides.
|
||||
|
||||
* `previous-text`
|
||||
_(Default: '« Previous')_ :
|
||||
Text for Previous button.
|
||||
|
||||
* `next-text`
|
||||
_(Default: 'Next »')_ :
|
||||
Text for Next button.
|
||||
|
||||
* `template-url`
|
||||
_(Default: 'template/pagination/pager.html') :
|
||||
Override the template for the component with a custom provided template
|
||||
|
||||
* `ng-disabled` <i class="glyphicon glyphicon-eye-open"></i>
|
||||
:
|
||||
Used to disable the pager component
|
||||
|
||||
@@ -221,40 +221,4 @@ angular.module('ui.bootstrap.pagination', [])
|
||||
};
|
||||
}
|
||||
};
|
||||
}])
|
||||
|
||||
.constant('uibPagerConfig', {
|
||||
itemsPerPage: 10,
|
||||
previousText: '« Previous',
|
||||
nextText: 'Next »',
|
||||
align: true
|
||||
})
|
||||
|
||||
.directive('uibPager', ['uibPagerConfig', function(pagerConfig) {
|
||||
return {
|
||||
restrict: 'EA',
|
||||
scope: {
|
||||
totalItems: '=',
|
||||
previousText: '@',
|
||||
nextText: '@',
|
||||
ngDisabled: '='
|
||||
},
|
||||
require: ['uibPager', '?ngModel'],
|
||||
controller: 'UibPaginationController',
|
||||
controllerAs: 'pagination',
|
||||
templateUrl: function(element, attrs) {
|
||||
return attrs.templateUrl || 'uib/template/pagination/pager.html';
|
||||
},
|
||||
replace: true,
|
||||
link: function(scope, element, attrs, ctrls) {
|
||||
var paginationCtrl = ctrls[0], ngModelCtrl = ctrls[1];
|
||||
|
||||
if (!ngModelCtrl) {
|
||||
return; // do nothing if no ng-model
|
||||
}
|
||||
|
||||
scope.align = angular.isDefined(attrs.align) ? scope.$parent.$eval(attrs.align) : pagerConfig.align;
|
||||
paginationCtrl.init(ngModelCtrl, pagerConfig);
|
||||
}
|
||||
};
|
||||
}]);
|
||||
|
||||
Reference in New Issue
Block a user