Ui-bootstrap pagination переустановка текущей страницы при инициализации

Я использую директиву pagination из библиотеки ui-bootstrap (angular -bootstrap). У меня возникает проблема, когда она инициализируется. Моя проблема возникает, когда я перехожу к определенной странице через url.

Что происходит, так это то, что мой контроллер инициализируется с помощью правильной страницы из $stateParams, тогда директива разбиения на страницы инициализирует и запускает функцию ng-change, которая переустанавливает страницу на 1. Теперь, когда на странице выбора больше не используется, есть ли способ только захватить пользовательские клики, чтобы изменить страницу? В идеале я хотел бы, чтобы директива инициализировалась перед контроллером, чтобы моя страница не получала reset. Заранее благодарю вас.

Я могу включить код, если это необходимо, но я чувствую, что мой вопрос не обязательно требует кода.

Ответ 1

Итак, я нашел решение после сверления в код angular -bootstrap. В их коде есть часы на totalPages, который проверяет, превышает ли текущая страница значение totalPages.

angular -bootstrap code:

if ( $scope.page > value ) {
  $scope.selectPage(value);
} else {
  ngModelCtrl.$render();
}

Что случилось, если я обновил страницу на странице 3 (например), мой контроллер перезагружал элементы для этой страницы, временно вызывая общее количество элементов, равное 0, а totalPages - 1. Это вызвало часы и над кодом.

Мое решение состояло в том, чтобы загрузить элементы в разрешении состояния, чтобы тотальные элементы (и, в свою очередь, totalPages) всегда были точными.

Ответ 2

Если вы не хотите использовать состояние разрешить данные, тогда вы можете просто добавить директиву ng-if в paginator. Предполагая, что $scope.total_count используется для привязки к атрибуту total-items, вы можете сделать что-то вроде следующего:

<pagination data-ng-if="total_count"
            total-items="total_count"
            ng-model="applied_filters.page"
            max-size="maxSize"
            class="pagination-sm"
            boundary-links="true"
            rotate="false"
            class="nomargin"
            num-pages="numPages"></pagination>

Таким образом, директива всегда инициализируется, когда у вас есть общее количество с сервера, а currentPage не будет больше, чем totalPages

Ответ 3

Директива ng-if не работала для меня, как и ожидалось (я не использовал синтаксис controllerAs): разбиение на страницы не смогло обновить переменную $scope.currentPage. Решением было использовать ng-model="$parent.currentPage" вместо ng-model="currentPage".

<uib-pagination ng-if="totalItems"
                total-items="totalItems"
                items-per-page="itemsPerPage"
                ng-model="$parent.currentPage">
</uib-pagination>

Ответ 4

Решение этой проблемы, которое я нашел из Github, реализовано и отлично работает.

Как уже упоминалось в других ответах, проблема связана с totalItems, и когда я пытаюсь перейти на страницу 2/3/n, totalItems становится 0 на мгновение и в процессе, значение currentPage становится равным 1 и я не могу перейти на мою желаемую страницу. Таким образом, мой трюк, прежде чем я вызову данные с сервера, я просто установил большее число как totalItems, и после получения данных с сервера обновляю totalItems.

$scope.totalItems = 1000;
QuotationService.getQuotations(url).then(function ( response ) {

     $scope.totalItems = response.data.total;
     $scope.quotations = response.data.data;
     $scope.isTableLoading = false;

});

На мой взгляд, только если isTableLoading - false, я показываю разбиение на страницы, иначе в разбивке на страницы будет отображаться неправильное количество страниц.

<div class="text-center" ng-show="isTableLoading == false">
     <uib-pagination boundary-links="true"  
           total-items="totalItems"
           items-per-page="15" max-size="15" ng-model="currentPage"
           class="pagination-sm" previous-text="&lsaquo;"
           next-text="&rsaquo;" first-text="&laquo;" last-text="&raquo;">
     </uib-pagination>
</div>

Теперь все работает отлично.

Ответ 5

Если вы хотите установить страницу при загрузке страницы, то просто загрузите модель, как она описана здесь.

С веб-сайта:

<pagination total-items="totalItems" ng-model="currentPage" ng-change="pageChanged()">
</pagination>

Я уверен, что вы уже посмотрели туда, поэтому, если модель не будет правильно настроена при инициализации контроллера, тогда у вас, очевидно, будут проблемы. Существует также случай, когда он, возможно, перезаписывается в другом месте, где вы используете $scope.currentPage. Хотя вы можете почувствовать, что это проще без кода, я бы предложил разместить HTML и Angular контроллер, на который вы ссылаетесь. Надеюсь, это поможет!

Ответ 6

Альтернативой разрешению состояния было бы установить общие значения в известном модуле значений. То же самое, я просто хотел прокомментировать ваш ответ, но у меня не было необходимых очков. Спасибо за объяснение, помогли мне!