feat(pager): move to separate component

- Separate pager into its own component

Closes #4935
This commit is contained in:
Wesley Cho
2015-11-22 12:41:09 -08:00
parent 2cd7f4fe6d
commit 2a3314df70
9 changed files with 74 additions and 68 deletions
+4
View File
@@ -0,0 +1,4 @@
<div ng-controller="PagerDemoController">
<h4>Pager</h4>
<uib-pager total-items="totalItems" ng-model="currentPage"></uib-pager>
</div>
+4
View File
@@ -0,0 +1,4 @@
angular.module('ui.bootstrap.demo').controller('PagerDemoCtrl', function($scope) {
$scope.totalItems = 64;
$scope.currentPage = 4;
});
+26
View File
@@ -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
+37
View File
@@ -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();
-4
View File
@@ -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>
-25
View File
@@ -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
-36
View File
@@ -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);
}
};
}]);