AngularJS UI Bootstrap分页问题：链接不可点击且显示为文本

兄弟，我之前也踩过UI Bootstrap分页的坑，你这俩问题（链接点不动、显示成纯文本而非按钮）大概率是配置或依赖缺失导致的，咱们一步步排查解决：

1. 先确认核心依赖有没有拉全 #

UI Bootstrap分页组件离不开三个关键文件，少一个都不行：

• AngularJS核心库（得用UI Bootstrap兼容的版本，比如1.6.x系列，别乱跨版本）
• Bootstrap纯CSS文件（不用Bootstrap的JS，UI Bootstrap已经用Angular重写了组件逻辑）
• UI Bootstrap的JS文件（要和你的Angular版本匹配）

给你个正确的引入顺序参考：

<!-- AngularJS核心 -->
<script src="angular.min.js"></script>
<!-- UI Bootstrap组件库 -->
<script src="angular-ui-bootstrap.min.js"></script>
<!-- Bootstrap样式（必须有，不然按钮样式出不来） -->
<link rel="stylesheet" href="bootstrap.min.css">

2. 别忘给Angular模块注入ui.bootstrap #

这是最容易疏忽的一步！你在定义Angular应用模块的时候，必须把ui.bootstrap加进去，不然分页指令根本不生效：

// 比如你的应用模块叫app，得这么写
var app = angular.module('app', ['ui.bootstrap']);

要是没注入，uib-pagination会被当成普通HTML标签，自然就是纯文本，也不会有点击事件。

3. 检查分页指令的关键属性是否绑定正确 #

你的控制器里写了pageChanged函数，但得确保指令上把核心属性都绑对了，比如：

<uib-pagination 
  total-items="totalItems" 
  ng-model="currentPage" 
  max-size="5" 
  boundary-links="true"
  ng-change="pageChanged()"
></uib-pagination>

这里几个属性缺一不可：

• total-items：绑定总条目数（数字类型），没有它分页组件不知道要生成多少页码
• ng-model：绑定当前页码变量，必须初始化赋值（比如$scope.currentPage = 1）
• ng-change：绑定你的pageChanged函数，点击页码时才会触发逻辑

4. 补全控制器里的分页初始化逻辑 #

从你的代码片段看，你是从myresource拿数据，那得确保数据加载后正确设置总条目数，不然分页组件没法正常工作：

.controller('HomeCtrl',['$scope','myresource','$route','$routeParams',function($scope,myresource,$route,$routeParams){ 
  // 先初始化分页参数！
  $scope.currentPage = 1;
  $scope.totalItems = 0;

  $scope.pageChanged = function(){ 
    console.log("Loading Pagination ... "); 
    // 这里可以根据currentPage请求对应页的数据
  }; 

  // 从JSON文件获取数据
  myresource.query(function(response){ 
    $scope.users = response; 
    $scope.totalItems = $scope.users.length; // 拿到数据后设置总条目数
  });
}]);

最后排查样式问题 #

要是上面都弄对了还是没Bootstrap按钮样式，就检查这两点：

• 浏览器控制台有没有Bootstrap CSS的404错误，确认文件路径写对了
• 有没有自定义CSS覆盖了Bootstrap的分页样式（比如优先级更高的选择器）

按这几步走，基本能解决你的问题，我之前遇到的类似情况都是漏了模块注入或者分页属性没绑对。

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