AngularJS中uib-pagination总页数问题求助

Hey there, let's tackle your uib-pagination total pages issue with that complex smList directive. I get that the old thread didn't cut it, so let's break this down with practical checks and fixes:

The most common culprit here is mismatched or incorrect data binding. Let's start with the basics:

• Add a debug line right above your pagination component to check if the values are what you expect:

  <p class="debug">Total items: {{vm.table.totalCount}} | Page size: {{vm.table.pageSize}} | Current page: {{vm.table.pageNumber}}</p>
  <div class="text-center" ng-show="vm.table.pageCount > 1">
    <!-- Your pagination ul here -->
  </div>
  

  • If totalCount doesn't match the actual total number of records (not just the current page's items), that's the root problem. Double-check your API response (if using backend pagination) to ensure it returns the full count of matching records, not just the sliced page data.
  • If you're calculating totalCount frontend-side (e.g., after filtering), make sure the calculation runs every time your dataset changes.

Your ng-show relies on vm.table.pageCount, but uib-pagination calculates its own total pages internally using total-items and items-per-page. If your manual pageCount calculation is off, the pagination might hide when it shouldn't, or show when it shouldn't.

• Replace the ng-show condition to rely on the source data instead of your computed value:

  <div class="text-center" ng-show="vm.table.totalCount > vm.table.pageSize">
  

  This way, you're directly checking if there are enough items to need pagination, avoiding errors from manual pageCount math.

Since you're using a custom smList directive, isolation scope can break bindings without you noticing:

• Check your directive's scope configuration. If you're using isolated scope, ensure properties like totalCount, pageNumber, and pageSize are bound with = (two-way binding) instead of @ (string binding). For example:

  angular.module('yourModule').directive('smList', function() {
    return {
      scope: {
        table: '=' // Ensures the vm.table object is passed correctly
      },
      // Rest of directive code
    };
  });
  

• Add console logs in your directive's controller/link function to confirm it's receiving the correct table values when data loads.

If vm.table.totalCount loads asynchronously (e.g., from an API call):

• Make sure you're not initializing the pagination component before the data arrives. Angular's digest cycle should update the component once the data is set, but if you're using non-Angular async methods (like raw fetch), you might need to trigger a digest manually with $scope.$apply() after updating totalCount.

Here's a cleaned-up version of your pagination code with these fixes applied:

<div class="text-center" ng-show="vm.table.totalCount > vm.table.pageSize">
  <ul uib-pagination 
      total-items="vm.table.totalCount" 
      ng-model="vm.table.pageNumber" 
      items-per-page="vm.table.pageSize" 
      max-size="5" 
      rotate="true"
      boundary-links="true">
  </ul>
</div>

Give these steps a shot—start with the debug print to confirm your data values, then work through the scope and async checks. That should help you pinpoint where the total pages calculation is going wrong.

内容的提问来源于stack exchange，提问作者Naomi