Reputation: 11
I am currently displaying a list with promise-based data, which I want to paginate through. It works fine with one pagination control, but when I include the pagination on the bottom of the list as well I get Error: transition superseded
.
My code currently looks like this;
HTML-template:
<div class="bq-pagination">
<ul dir-pagination-controls
on-page-change="pageChanged(pagination.currentPage, false)"
max-size="pagination.maxSize"
direction-links="true">
</ul>
</div>
<hr />
<div class="item-list">
<div class="row item-list-row auction-list"
dir-paginate="a in auctions |
orderBy: selectedSort.sort : selectedSort.reverse |
itemsPerPage: pagination.itemsPerPage"
current-page="pagination.currentPage">
{{view-stuff}}
</div>
</div>
<div class="bq-pagination">
<ul dir-pagination-controls
on-page-change="pageChanged(pagination.currentPage, false)"
max-size="pagination.maxSize"
direction-links="true">
</ul>
</div>
The controller is inside a directive, and looks like this:
(function () {
'use strict';
angular
.module('bqWeb')
.directive('bqAuctionList', auctionList);
function auctionList() {
return {
scope: {
auctions: "=bqAuctionList"
},
templateUrl: 'components/templates/auction-list.html',
//controllerAs: 'vm',
//bindToController: true
controller: function ($scope, $state, $stateParams, $document) {
$scope.pagination = {
currentPage: parseInt($stateParams.page),
itemsPerPage: 25,
maxSize: 7
};
$scope.pageChanged = function (pageNumber, scroll) {
if (scroll) $document.scrollTopAnimated(0, 2000);
$state.go(".", { page: pageNumber }, { notify: false });
};
$scope.sortOptions = [{unimportant objects for sorting}];
$scope.selectedSort = $scope.sortOptions[2];
}
}
};
})();
The weird thing is that both pagination-controls still work, it just throws the error when clicking on the pagination controls.
Relevant dependencies from package.json:
"angular": "~1.6.1",
"angular-ui-router": "^0.3.2",
"angular-utils-pagination": "^0.11.1"
Upvotes: 1
Views: 741