paginazione ui-bootstrap reimpostazione della pagina corrente all'inizializzazione

Question

Sto usando la direttiva di impaginazione dalla libreria ui-bootstrap (angular-bootstrap). Sto avendo un problema quando si inizializza. Il mio problema si verifica quando navigo verso una pagina specifica tramite url.

Che cosa sta succedendo è che il mio controller si inizializza con la pagina corretta da $ stateParams, quindi la direttiva di impaginazione inizializza e attiva la funzione ng-change che sta reimpostando la pagina su 1. Ora che sulla pagina di selezione non è più usato, c'è un modo per catturare solo i clic degli utenti per cambiare la pagina? Idealmente vorrei che la direttiva inizializzasse prima del controller in modo che la mia pagina non venisse ripristinata. Grazie in anticipo.

Posso includere il codice se necessario, ma ritengo che la mia domanda non richieda necessariamente un blocco di codice.

Answer 1

Quindi ho trovato una soluzione dopo aver eseguito il drill down nel codice angular-bootstrap. Il loro codice ha un orologio su TotalPages che controlla se la pagina corrente è maggiore del valore totale delle Pagine.

codice angolare-bootstrap:

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

Quello che stava accadendo era se ho rinfrescato la pagina su pagina 3 (per esempio) il mio controller stava ricaricando le voci per quella pagina causando temporaneamente totale-articoli per essere 0 e totalPages da calcolare come 1. Questo ha attivato l'orologio e il codice sopra.

La mia soluzione è stata quella di caricare gli articoli nello stato risoluto in modo che gli elementi totali (e quindi le pagine totali) fossero sempre precisi.

Answer 2

Se stai cercando di impostare la pagina quando la pagina viene caricata, then just load up the model as it describes here.

Dal sito:

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

Sono sicuro che hai già guardato lì, quindi se il modello non è essendo impostato correttamente sull'inizializzazione del controller, ovviamente avrai problemi. C'è anche il caso in cui potrebbe essere sovrascritto in un altro luogo in cui si sta utilizzando $scope.currentPage. Sebbene tu possa ritenere che sia più semplice senza codice, ti suggerirei di postare l'HTML e il controller angolare a cui ti stai riferendo. Spero che sia d'aiuto!

Answer 3

Un'alternativa alla risoluzione dello stato sarebbe quella di impostare gli elementi totali in un modulo valore una volta noti. Stessa cosa, in realtà volevo solo commentare la tua risposta sopra, ma non avevo i punti necessari. Grazie per la spiegazione, mi ha aiutato!

Answer 4

Se non si desidera utilizzare lo stato per risolvere i dati, è sufficiente aggiungere una direttiva ng-if a paginator. Supponendo $scope.total_count viene utilizzato per legare all'attributo total-items, si può fare qualcosa di simile al seguente:

<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> 

In questo modo la direttiva è sempre inizializzato quando si dispone di conteggio totale dal server & currentPage non sarà superiore a TotalPages

Answer 5

La direttiva ng-if non ha funzionato come previsto (non ho utilizzato la sintassi controllerAs): la paginazione non è stata più in grado di aggiornare la variabile $scope.currentPage. La soluzione era utilizzare ng-model="$parent.currentPage" anziché ng-model="currentPage".

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

Answer 6

Una soluzione a questo problema che ho trovato da Github, eseguito ed ha funzionato perfettamente.

Come menzionato in altre risposte anche, il problema è con totalItems e quando provo a passare a pagina 2/3/n, totalItems diventa 0 per un momento e nel processo, currentPage valore diventa 1 e non può vai alla mia pagina desiderata. Quindi il mio trucco è, prima di chiamare i dati dal server, ho appena impostato un numero più grande come totalItems e dopo aver ricevuto i dati dal server, aggiorno totalItems.

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

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

}); 

A mio parere, solo se isTableLoading è false, mi mostrano la paginazione, in caso contrario l'impaginazione mostrerà un numero errato di pagine.

<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> 

Ora tutto funziona perfettamente.