AngularJS嵌套手风琴分页导航按钮不显示问题求助

我在AngularJS中给嵌套手风琴实现分页功能，目前已能限制每页显示的条目数量，但手风琴内的分页导航按钮无法显示。相关代码如下：

HTML代码 #

<body>
    <div ng-controller="MyController">
      <div class="accordion-item" ng-repeat="item in pgmg" ng-class="{'active': item.isOpen}">
        <div class="accordion-header" ng-click="toggle(item)">
          <p>{{item.automationState}}</p>
        </div>
        <div class="accordion-content" ng-show="item.isOpen">
          <table class='table table-striped' border='1'>
            <thead class='thead-dark'>
              <tr>
                <th>Migration context</th>
                <th>CHG number</th>
                <th>Instance Name</th>
              </tr>
            </thead>
            <tbody>
              <tr ng-repeat="pgmgObj in getPagingData(item)">
                <td>{{pgmgObj.migrationContext}}</td>
                <td>{{pgmgObj.chg}}</td>
                <td>{{pgmgObj.instanceName}}</td>
              </tr>
            </tbody>
          </table>
          <uib-pagination total-items="item.totalItems" ng-model="item.currentPage" items-per-page="itemsPerPage" ng-change="updatePage(item)"></uib-pagination>
        </div>
      </div>
    </div>
  </body>

JavaScript代码 #

// Define the AngularJS module and controller
angular.module('simpleApp', [])
  .controller('SimpleController', function($scope) {
    $scope.pgmg = [];
    
    // Function to toggle accordion item open/closed state
    $scope.toggle = function(item) {
        item.isOpen = !item.isOpen;
    };
  
     $scope.itemsPerPage = 5;
       // Pagination function for each accordion item
    $scope.getPagingData = function(item) {
    let start = (item.currentPage - 1) * $scope.itemsPerPage;
    let end = start + $scope.itemsPerPage;
    return item.details.slice(start, end);
  };

  // Update the current page data for each item
  $scope.updatePage = function(item) {
    item.totalItems = item.details.length;
  };
  
  });

补充说明：

• $scope.pgmg中的每个item都有独立的currentPage和totalItems属性
• getPagingData函数接收item参数，返回对应手风琴项的分页数据
• 每个uib-pagination指令绑定到item.currentPage，切换页面时调用updatePage更新数据

问题排查与解决方案 #

核心问题点

1. 模块依赖缺失：uib-pagination是AngularUI Bootstrap的专属组件，当前模块simpleApp未引入ui.bootstrap依赖，导致指令无法被框架识别。
2. 控制器名称不匹配：HTML中使用ng-controller="MyController"，但JS里定义的控制器是SimpleController，控制器未正确绑定，分页指令无法获取上下文数据。
3. 分页参数未初始化：每个pgmg条目需要初始化currentPage（默认设为1）和totalItems（等于details数组长度），否则分页指令因缺少必要参数不会渲染。
4. 缺少UI Bootstrap资源：未引入AngularUI Bootstrap的CSS和JS文件，导致分页按钮无样式且功能失效。

修正后的完整代码

HTML代码

<!DOCTYPE html>
<html ng-app="simpleApp">
<head>
  <!-- 引入必要资源 -->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/2.5.0/ui-bootstrap-tpls.min.js"></script>
</head>
<body>
    <div ng-controller="SimpleController">
      <div class="accordion-item" ng-repeat="item in pgmg" ng-class="{'active': item.isOpen}">
        <div class="accordion-header" ng-click="toggle(item)">
          <p>{{item.automationState}}</p>
        </div>
        <div class="accordion-content" ng-show="item.isOpen">
          <table class='table table-striped' border='1'>
            <thead class='thead-dark'>
              <tr>
                <th>Migration context</th>
                <th>CHG number</th>
                <th>Instance Name</th>
              </tr>
            </thead>
            <tbody>
              <tr ng-repeat="pgmgObj in getPagingData(item)">
                <td>{{pgmgObj.migrationContext}}</td>
                <td>{{pgmgObj.chg}}</td>
                <td>{{pgmgObj.instanceName}}</td>
              </tr>
            </tbody>
          </table>
          <uib-pagination total-items="item.totalItems" ng-model="item.currentPage" items-per-page="itemsPerPage" ng-change="updatePage(item)"></uib-pagination>
        </div>
      </div>
    </div>
  </body>
</html>

JavaScript代码

angular.module('simpleApp', ['ui.bootstrap'])
  .controller('SimpleController', function($scope) {
    // 初始化带分页参数的手风琴数据
    $scope.pgmg = [
      {
        automationState: "已完成",
        isOpen: false,
        currentPage: 1,
        totalItems: 12,
        details: Array.from({length:12}, (_,i) => ({
          migrationContext: `项目${i+1}`,
          chg: `CHG-${i+100}`,
          instanceName: `服务器${i+1}`
        }))
      },
      {
        automationState: "进行中",
        isOpen: false,
        currentPage: 1,
        totalItems: 8,
        details: Array.from({length:8}, (_,i) => ({
          migrationContext: `项目${i+1}`,
          chg: `CHG-${i+200}`,
          instanceName: `服务器${i+1}`
        }))
      }
    ];
    
    $scope.toggle = function(item) {
        item.isOpen = !item.isOpen;
    };
  
    $scope.itemsPerPage = 5;
    
    $scope.getPagingData = function(item) {
      let start = (item.currentPage - 1) * $scope.itemsPerPage;
      let end = start + $scope.itemsPerPage;
      return item.details.slice(start, end);
    };

    $scope.updatePage = function(item) {
      item.totalItems = item.details.length;
    };
  });

按上述修改后，分页导航按钮会正常显示并工作，核心是确保UI Bootstrap依赖正确引入、控制器名称匹配、分页参数初始化完成，以及必要的资源文件加载到位。

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