ui-bootstrap分頁重新初始化當前頁面

我正在使用ui-bootstrap（angular-bootstrap）庫中的分頁指令。初始化時遇到問題。我通過網址導航到特定頁面時出現了我的問題。ui-bootstrap分頁重新初始化當前頁面

發生了什麼事情是我的控制器使用$ stateParams中的正確頁面進行初始化，然後分頁指令初始化並觸發將頁面重置爲1的ng-change函數。現在，在選擇頁面不再使用，有沒有辦法只捕獲用戶點擊更改頁面？理想情況下，我希望該指令在控制器之前進行初始化，以便我的頁面不會重置。先謝謝你。

如果需要，我可以包含代碼，但我覺得我的問題不一定需要代碼塊。

來源

2015-01-12 pcgilday

所以我在鑽入角引導代碼之後找到了一個解決方案。他們的代碼在totalPages上有一個監視，用於檢查當前頁面是否大於totalPages值。

角引導代碼：

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

發生了什麼事了，如果我刷新3頁（例如）我的控制器被重新加載該頁面的項目導致暫時的總項爲0，並在頁面totalPages被計算爲1.這引發了手表和上面的代碼。

我的解決方案是加載的狀態解決項目，使總項目（並進而totalPages）永遠是準確的。

來源

2015-01-12 23:16:54 pcgilday

拯救生命。謝謝！ –

嗨，我是在相同的情況。我無法理解你對'國家決心'的含義。請，你能解釋一下嗎？ – wildbyte

@wildbyte - ui路由器有一個解析函數，可以在狀態加載之前運行並完成。這允許您在狀態控制器或指令加載之前設置值。 – pcgilday

如果你正在尋找設置頁面在頁面加載時，then just load up the model as it describes here.

從網站：

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

我敢肯定你已經看過那裏，所以如果模式不在控制器初始化時被正確設置，那麼你顯然會遇到問題。也有可能在您使用$scope.currentPage的另一個地方被覆蓋的情況。儘管如果沒有代碼，您可能會覺得更簡單，但我會建議您發佈您所指的HTML和Angular Controller。希望能幫助到你！

來源

2015-01-12 22:49:06 TommyMac

謝謝你的回答;不過，我有這樣的指示。如果你在下面看到我的解決方案，我的問題是控制器初始化totalItems爲0（等待api響應）並觸發$ scope。$ watch that reset currentPage。 – pcgilday

解決狀態的另一種方法是設置一個已知值模塊中的總項目。相同的處理，實際上我只是想對你的上述答案發表評論，但我沒有必要的要點。感謝您的解釋，幫助我！

來源

2015-01-22 22:57:19 Housty

如果您不想使用state來解析數據，那麼您可以在paginator上添加ng-if指令。假設$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>

這樣，當你從服務器&當前頁總數不會是指令總是初始化大於總頁數

來源

2015-06-13 11:41:52

你也可以在分頁標籤上加上'ng-if =「total_count」'。 –

是的，這也會工作 –

謝謝！我認爲它更好的解決方案。 –

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>

來源

2016-01-19 07:00:42 theluckyluke

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

現在一切工作完美。

來源

2016-06-07 18:51:19

這是一個黑客，但它的工作原理:-) – dps

ui-bootstrap分頁重新初始化當前頁面

回答

相關問題