supererik8
supererik8

Reputation: 11

Error on two instances of pagination controls for AngularJS dir-paginate

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

Answers (0)

Related Questions