AngularJS使用dirPagination分页不显示全部页码与Chart.js图表冲突问题

根因分析 #

• 核心是变量命名冲突：你的环形图chart-data属性绑定的是$scope.data变量，当你修改ng-repeat逻辑为collection in data = collections时，相当于直接在当前作用域把data赋值为要分页的collections集合，覆盖了原本给图表提供数据的data变量，直接导致图表渲染失败。
• 分页异常原因：你最初给分页组件uib-pagination的total-items属性绑定的是data.length，这里的data是图表的数据源，而非你要分页的collections集合的长度，所以总页数计算错误，才会出现15条数据仅显示2页的问题。

修复步骤 #

1. 修改分页组件的total-items绑定值，替换为你要分页的集合长度collections.length，修改后代码如下：

<uib-pagination class="pagination float-right" total-items="collections.length" ng-model="page" previous-text="&lsaquo;" next-text="&rsaquo;" items-per-page="selectvalue"></uib-pagination>

2. 把ng-repeat代码改回原有逻辑，不要在ng-repeat里做data = collections的赋值操作，避免覆盖图表的数据源变量：

<div class="col-sm-4" ng-repeat="collection in collections | orderBy:sortColumn:reverseSort | limitTo:selectvalue:selectvalue*(page-1)">

调整后分页会基于collections的总长度计算页码，图表使用的data变量也不会被污染，两个功能可同时正常运行。

问题截图 #

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