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

Commit 387c6e7

Browse files
wesleychowesleycho
committed
feat(pagination): remove replace usage
- Remove `replace: true` usage BREAKING CHANGE: Due to the removal of `replace: true`, this affects the HTML structure slightly - see documentation examples to see new usage. Closes #5992
1 parent 9b24e1d commit 387c6e7

File tree

4 files changed

+43
-44
lines changed

4 files changed

+43
-44
lines changed

‎src/pagination/docs/demo.html

+9-9
Original file line numberDiff line numberDiff line change
@@ -1,24 +1,24 @@
11
<div ng-controller="PaginationDemoCtrl">
22
<h4>Default</h4>
3-
<uib-pagination total-items="totalItems" ng-model="currentPage" ng-change="pageChanged()"></uib-pagination>
4-
<uib-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;"></uib-pagination>
5-
<uib-pagination direction-links="false" boundary-links="true" total-items="totalItems" ng-model="currentPage"></uib-pagination>
6-
<uib-pagination direction-links="false" total-items="totalItems" ng-model="currentPage" num-pages="smallnumPages"></uib-pagination>
3+
<ul uib-pagination total-items="totalItems" ng-model="currentPage" ng-change="pageChanged()"></ul>
4+
<ul uib-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;"></ul>
5+
<ul uib-pagination direction-links="false" boundary-links="true" total-items="totalItems" ng-model="currentPage"></ul>
6+
<ul uib-pagination direction-links="false" total-items="totalItems" ng-model="currentPage" num-pages="smallnumPages"></ul>
77
<pre>The selected page no: {{currentPage}}</pre>
88
<button type="button" class="btn btn-info" ng-click="setPage(3)">Set current page to: 3</button>
99

1010
<hr />
1111
<h4>Limit the maximum visible buttons</h4>
1212
<h6><code>rotate</code> defaulted to <code>true</code>:</h6>
13-
<uib-pagination total-items="bigTotalItems" ng-model="bigCurrentPage" max-size="maxSize" class="pagination-sm" boundary-links="true" num-pages="numPages"></uib-pagination>
13+
<ul uib-pagination total-items="bigTotalItems" ng-model="bigCurrentPage" max-size="maxSize" class="pagination-sm" boundary-links="true" num-pages="numPages"></ul>
1414
<h6><code>rotate</code> defaulted to <code>true</code> and <code>force-ellipses</code> set to <code>true</code>:</h6>
15-
<uib-pagination total-items="bigTotalItems" ng-model="bigCurrentPage" max-size="maxSize" class="pagination-sm" boundary-links="true" force-ellipses="true"></uib-pagination>
15+
<ul uib-pagination total-items="bigTotalItems" ng-model="bigCurrentPage" max-size="maxSize" class="pagination-sm" boundary-links="true" force-ellipses="true"></ul>
1616
<h6><code>rotate</code> set to <code>false</code>:</h6>
17-
<uib-pagination total-items="bigTotalItems" ng-model="bigCurrentPage" max-size="maxSize" class="pagination-sm" boundary-links="true" rotate="false"></uib-pagination>
17+
<ul uib-pagination total-items="bigTotalItems" ng-model="bigCurrentPage" max-size="maxSize" class="pagination-sm" boundary-links="true" rotate="false"></ul>
1818
<h6><code>boundary-link-numbers</code> set to <code>true</code> and <code>rotate</code> defaulted to <code>true</code>:</h6>
19-
<uib-pagination total-items="bigTotalItems" ng-model="bigCurrentPage" max-size="maxSize" class="pagination-sm" boundary-link-numbers="true"></uib-pagination>
19+
<ul uib-pagination total-items="bigTotalItems" ng-model="bigCurrentPage" max-size="maxSize" class="pagination-sm" boundary-link-numbers="true"></ul>
2020
<h6><code>boundary-link-numbers</code> set to <code>true</code> and <code>rotate</code> set to <code>false</code>:</h6>
21-
<uib-pagination total-items="bigTotalItems" ng-model="bigCurrentPage" max-size="maxSize" class="pagination-sm" boundary-link-numbers="true" rotate="false"></uib-pagination>
21+
<ul uib-pagination total-items="bigTotalItems" ng-model="bigCurrentPage" max-size="maxSize" class="pagination-sm" boundary-link-numbers="true" rotate="false"></ul>
2222
<pre>Page: {{bigCurrentPage}} / {{numPages}}</pre>
2323

2424
</div>

‎src/pagination/pagination.js

+2-1
Original file line numberDiff line numberDiff line change
@@ -132,13 +132,14 @@ angular.module('ui.bootstrap.pagination', ['ui.bootstrap.paging', 'ui.bootstrap.
132132
ngDisabled:'='
133133
},
134134
require: ['uibPagination', '?ngModel'],
135+
restrict: 'A',
135136
controller: 'UibPaginationController',
136137
controllerAs: 'pagination',
137138
templateUrl: function(element, attrs) {
138139
return attrs.templateUrl || 'uib/template/pagination/pagination.html';
139140
},
140-
replace: true,
141141
link: function(scope, element, attrs, ctrls) {
142+
element.addClass('pagination');
142143
var paginationCtrl = ctrls[0], ngModelCtrl = ctrls[1];
143144

144145
if (!ngModelCtrl) {

‎src/pagination/test/pagination.spec.js

+27-27
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@ describe('pagination directive', function() {
1111
$document = _$document_;
1212
$templateCache = _$templateCache_;
1313
body = $document.find('body');
14-
element = $compile('<uib-pagination total-items="total" ng-model="currentPage"></uib-pagination>')($rootScope);
14+
element = $compile('<ul uib-pagination total-items="total" ng-model="currentPage"></ul>')($rootScope);
1515
$rootScope.$digest();
1616
}));
1717

@@ -58,7 +58,7 @@ describe('pagination directive', function() {
5858
$templateCache.put('uib/template/pagination/pagination.html', '<div>{{pagination.randomText}}</div>');
5959
var scope = $rootScope.$new();
6060

61-
element = $compile('<uib-pagination></uib-pagination>')(scope);
61+
element = $compile('<ul uib-pagination></ul>')(scope);
6262
$rootScope.$digest();
6363

6464
var ctrl = element.controller('uibPagination');
@@ -68,17 +68,17 @@ describe('pagination directive', function() {
6868
ctrl.randomText = 'foo';
6969
$rootScope.$digest();
7070

71-
expect(element.html()).toBe('foo');
71+
expect(element.html()).toBe('<div class="ng-binding">foo</div>');
7272
});
7373

7474
it('allows custom templates', function() {
7575
$templateCache.put('foo/bar.html', '<div>baz</div>');
7676
var scope = $rootScope.$new();
7777

78-
element = $compile('<uib-pagination template-url="foo/bar.html"></uib-pagination>')(scope);
78+
element = $compile('<ul uib-pagination template-url="foo/bar.html"></ul>')(scope);
7979
$rootScope.$digest();
8080

81-
expect(element.html()).toBe('baz');
81+
expect(element.html()).toBe('<div>baz</div>');
8282
});
8383

8484
it('contains num-pages + 2 li elements', function() {
@@ -213,7 +213,7 @@ describe('pagination directive', function() {
213213
describe('`items-per-page`', function() {
214214
beforeEach(function() {
215215
$rootScope.perpage = 5;
216-
element = $compile('<uib-pagination total-items="total" items-per-page="perpage" ng-model="currentPage"></uib-pagination>')($rootScope);
216+
element = $compile('<ul uib-pagination total-items="total" items-per-page="perpage" ng-model="currentPage"></ul>')($rootScope);
217217
$rootScope.$digest();
218218
});
219219

@@ -256,7 +256,7 @@ describe('pagination directive', function() {
256256
describe('executes `ng-change` expression', function() {
257257
beforeEach(function() {
258258
$rootScope.selectPageHandler = jasmine.createSpy('selectPageHandler');
259-
element = $compile('<uib-pagination total-items="total" ng-model="currentPage" ng-change="selectPageHandler()"></uib-pagination>')($rootScope);
259+
element = $compile('<ul uib-pagination total-items="total" ng-model="currentPage" ng-change="selectPageHandler()"></ul>')($rootScope);
260260
$rootScope.$digest();
261261
});
262262

@@ -286,7 +286,7 @@ describe('pagination directive', function() {
286286
$rootScope.total = 98; // 10 pages
287287
$rootScope.currentPage = 3;
288288
$rootScope.maxSize = 5;
289-
element = $compile('<uib-pagination total-items="total" ng-model="currentPage" max-size="maxSize"></uib-pagination>')($rootScope);
289+
element = $compile('<ul uib-pagination total-items="total" ng-model="currentPage" max-size="maxSize"></ul>')($rootScope);
290290
$rootScope.$digest();
291291
});
292292

@@ -367,7 +367,7 @@ describe('pagination directive', function() {
367367
$rootScope.total = 98; // 10 pages
368368
$rootScope.currentPage = 3;
369369
$rootScope.maxSize = 5;
370-
element = $compile('<uib-pagination total-items="total" ng-model="currentPage" max-size="maxSize" force-ellipses="true"></uib-pagination>')($rootScope);
370+
element = $compile('<ul uib-pagination total-items="total" ng-model="currentPage" max-size="maxSize" force-ellipses="true"></ul>')($rootScope);
371371
$rootScope.$digest();
372372
});
373373

@@ -429,7 +429,7 @@ describe('pagination directive', function() {
429429
$rootScope.total = 98; // 10 pages
430430
$rootScope.currentPage = 3;
431431
$rootScope.maxSize = 5;
432-
element = $compile('<uib-pagination total-items="total" ng-model="currentPage" max-size="maxSize" boundary-link-numbers="true"></uib-pagination>')($rootScope);
432+
element = $compile('<ul uib-pagination total-items="total" ng-model="currentPage" max-size="maxSize" boundary-link-numbers="true"></ul>')($rootScope);
433433
$rootScope.$digest();
434434
});
435435

@@ -522,7 +522,7 @@ describe('pagination directive', function() {
522522
$rootScope.currentPage = 7;
523523
$rootScope.maxSize = 5;
524524
$rootScope.rotate = false;
525-
element = $compile('<uib-pagination total-items="total" ng-model="currentPage" max-size="maxSize" rotate="rotate"></uib-pagination>')($rootScope);
525+
element = $compile('<ul uib-pagination total-items="total" ng-model="currentPage" max-size="maxSize" rotate="rotate"></ul>')($rootScope);
526526
$rootScope.$digest();
527527
});
528528

@@ -581,7 +581,7 @@ describe('pagination directive', function() {
581581

582582
describe('pagination directive with `boundary-links`', function() {
583583
beforeEach(function() {
584-
element = $compile('<uib-pagination boundary-links="true" total-items="total" ng-model="currentPage"></uib-pagination>')($rootScope);
584+
element = $compile('<ul uib-pagination boundary-links="true" total-items="total" ng-model="currentPage"></ul>')($rootScope);
585585
$rootScope.$digest();
586586
});
587587

@@ -636,15 +636,15 @@ describe('pagination directive', function() {
636636
});
637637

638638
it('changes "first" & "last" text from attributes', function() {
639-
element = $compile('<uib-pagination boundary-links="true" first-text="<<<" last-text=">>>" total-items="total" ng-model="currentPage"></uib-pagination>')($rootScope);
639+
element = $compile('<ul uib-pagination boundary-links="true" first-text="<<<" last-text=">>>" total-items="total" ng-model="currentPage"></ul>')($rootScope);
640640
$rootScope.$digest();
641641

642642
expect(getPaginationEl(0).text()).toBe('<<<');
643643
expect(getPaginationEl(-1).text()).toBe('>>>');
644644
});
645645

646646
it('changes "previous" & "next" text from attributes', function() {
647-
element = $compile('<uib-pagination boundary-links="true" previous-text="<<" next-text=">>" total-items="total" ng-model="currentPage"></uib-pagination>')($rootScope);
647+
element = $compile('<ul uib-pagination boundary-links="true" previous-text="<<" next-text=">>" total-items="total" ng-model="currentPage"></ul>')($rootScope);
648648
$rootScope.$digest();
649649

650650
expect(getPaginationEl(1).text()).toBe('<<');
@@ -654,7 +654,7 @@ describe('pagination directive', function() {
654654
it('changes "first" & "last" text from interpolated attributes', function() {
655655
$rootScope.myfirstText = '<<<';
656656
$rootScope.mylastText = '>>>';
657-
element = $compile('<uib-pagination boundary-links="true" first-text="{{myfirstText}}" last-text="{{mylastText}}" total-items="total" ng-model="currentPage"></uib-pagination>')($rootScope);
657+
element = $compile('<ul uib-pagination boundary-links="true" first-text="{{myfirstText}}" last-text="{{mylastText}}" total-items="total" ng-model="currentPage"></ul>')($rootScope);
658658
$rootScope.$digest();
659659

660660
expect(getPaginationEl(0).text()).toBe('<<<');
@@ -664,7 +664,7 @@ describe('pagination directive', function() {
664664
it('changes "previous" & "next" text from interpolated attributes', function() {
665665
$rootScope.previousText = '<<';
666666
$rootScope.nextText = '>>';
667-
element = $compile('<uib-pagination boundary-links="true" previous-text="{{previousText}}" next-text="{{nextText}}" total-items="total" ng-model="currentPage"></uib-pagination>')($rootScope);
667+
element = $compile('<ul uib-pagination boundary-links="true" previous-text="{{previousText}}" next-text="{{nextText}}" total-items="total" ng-model="currentPage"></ul>')($rootScope);
668668
$rootScope.$digest();
669669

670670
expect(getPaginationEl(1).text()).toBe('<<');
@@ -700,7 +700,7 @@ describe('pagination directive', function() {
700700

701701
describe('pagination directive with just number links', function() {
702702
beforeEach(function() {
703-
element = $compile('<uib-pagination direction-links="false" total-items="total" ng-model="currentPage"></uib-pagination>')($rootScope);
703+
element = $compile('<ul uib-pagination direction-links="false" total-items="total" ng-model="currentPage"></ul>')($rootScope);
704704
$rootScope.$digest();
705705
});
706706

@@ -752,7 +752,7 @@ describe('pagination directive', function() {
752752
describe('with just boundary & number links', function() {
753753
beforeEach(function() {
754754
$rootScope.directions = false;
755-
element = $compile('<uib-pagination boundary-links="true" direction-links="directions" total-items="total" ng-model="currentPage"></uib-pagination>')($rootScope);
755+
element = $compile('<ul uib-pagination boundary-links="true" direction-links="directions" total-items="total" ng-model="currentPage"></ul>')($rootScope);
756756
$rootScope.$digest();
757757
});
758758

@@ -784,7 +784,7 @@ describe('pagination directive', function() {
784784
describe('`num-pages`', function() {
785785
beforeEach(function() {
786786
$rootScope.numpg = null;
787-
element = $compile('<uib-pagination total-items="total" ng-model="currentPage" num-pages="numpg"></uib-pagination>')($rootScope);
787+
element = $compile('<ul uib-pagination total-items="total" ng-model="currentPage" num-pages="numpg"></ul>')($rootScope);
788788
$rootScope.$digest();
789789
});
790790

@@ -827,7 +827,7 @@ describe('pagination directive', function() {
827827
paginationConfig.previousText = 'PR';
828828
paginationConfig.nextText = 'NE';
829829
paginationConfig.lastText = 'LA';
830-
element = $compile('<uib-pagination total-items="total" ng-model="currentPage"></uib-pagination>')($rootScope);
830+
element = $compile('<ul uib-pagination total-items="total" ng-model="currentPage"></ul>')($rootScope);
831831
$rootScope.$digest();
832832

833833
expect(getPaginationEl(0).text()).toBe('FI');
@@ -838,23 +838,23 @@ describe('pagination directive', function() {
838838

839839
it('contains number of pages + 2 li elements', function() {
840840
paginationConfig.itemsPerPage = 5;
841-
element = $compile('<uib-pagination total-items="total" ng-model="currentPage"></uib-pagination>')($rootScope);
841+
element = $compile('<ul uib-pagination total-items="total" ng-model="currentPage"></ul>')($rootScope);
842842
$rootScope.$digest();
843843

844844
expect(getPaginationBarSize()).toBe(12);
845845
});
846846

847847
it('should take maxSize defaults into account', function() {
848848
paginationConfig.maxSize = 2;
849-
element = $compile('<uib-pagination total-items="total" ng-model="currentPage"></uib-pagination>')($rootScope);
849+
element = $compile('<ul uib-pagination total-items="total" ng-model="currentPage"></ul>')($rootScope);
850850
$rootScope.$digest();
851851

852852
expect(getPaginationBarSize()).toBe(4);
853853
});
854854

855855
it('should take forceEllipses defaults into account', function () {
856856
paginationConfig.forceEllipses = true;
857-
element = $compile('<uib-pagination total-items="total" ng-model="currentPage" max-size="2"></uib-pagination>')($rootScope);
857+
element = $compile('<ul uib-pagination total-items="total" ng-model="currentPage" max-size="2"></ul>')($rootScope);
858858
$rootScope.$digest();
859859

860860
// Should contain 2 nav buttons, 2 pages, and 2 ellipsis since the currentPage defaults to 3, which is in the middle
@@ -865,7 +865,7 @@ describe('pagination directive', function() {
865865
paginationConfig.boundaryLinkNumbers = true;
866866
$rootScope.total = 88; // 9 pages
867867
$rootScope.currentPage = 5;
868-
element = $compile('<uib-pagination total-items="total" ng-model="currentPage" max-size="3"></uib-pagination>')($rootScope);
868+
element = $compile('<ul uib-pagination total-items="total" ng-model="currentPage" max-size="3"></ul>')($rootScope);
869869
$rootScope.$digest();
870870

871871
// Should contain 2 nav buttons, 2 pages, 2 ellipsis, and 2 extra end numbers since the currentPage is in the middle
@@ -879,7 +879,7 @@ describe('pagination directive', function() {
879879
$rootScope.pageLabel = function(id) {
880880
return 'test_'+ id;
881881
};
882-
element = $compile('<uib-pagination boundary-links="true" page-label="pageLabel($page)" first-text="<<" previous-text="<" next-text=">" last-text=">>" total-items="total" ng-model="currentPage"></uib-pagination>')($rootScope);
882+
element = $compile('<ul uib-pagination boundary-links="true" page-label="pageLabel($page)" first-text="<<" previous-text="<" next-text=">" last-text=">>" total-items="total" ng-model="currentPage"></ul>')($rootScope);
883883
$rootScope.$digest();
884884
});
885885

@@ -904,7 +904,7 @@ describe('pagination directive', function() {
904904

905905
describe('disabled with ngDisable', function() {
906906
beforeEach(function() {
907-
element = $compile('<uib-pagination total-items="total" ng-model="currentPage" ng-disabled="disabled"></uib-pagination>')($rootScope);
907+
element = $compile('<ul uib-pagination total-items="total" ng-model="currentPage" ng-disabled="disabled"></ul>')($rootScope);
908908
$rootScope.currentPage = 3;
909909
$rootScope.$digest();
910910
});
@@ -941,7 +941,7 @@ describe('pagination directive', function() {
941941
it('should retain the model value when total-items starts as undefined', function() {
942942
$rootScope.currentPage = 5;
943943
$rootScope.total = undefined;
944-
element = $compile('<uib-pagination total-items="total" ng-model="currentPage"></uib-pagination>')($rootScope);
944+
element = $compile('<ul uib-pagination total-items="total" ng-model="currentPage"></ul>')($rootScope);
945945
$rootScope.$digest();
946946

947947
expect($rootScope.currentPage).toBe(5);

‎template/pagination/pagination.html

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

0 commit comments

Comments
 (0)