使用angularjs ui-bootstrap遇到的问题

最新推荐文章于 2022-09-05 13:42:47 发布

原创最新推荐文章于 2022-09-05 13:42:47 发布 · 3.7k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#angularjs #ui-bootstrap

Angularjs 专栏收录该内容

55 篇文章

订阅专栏

本文探讨了AngularJS中ui-bootstrap.pagination组件的一个常见问题：页面刷新后当前页被重置为1的情况。通过深入源码分析，揭示了问题根源，并提供了两种解决方案。

今天在使用angulrjs的ui-bootstrap中的ui.bootstrap.pagination时遇到的问题。
先来个示例代码：
<div class="row">
<uib-pagination total-items="bigTotalItems" ng-model="bigCurrentPage" max-size="maxSize" class="pagination-sm" boundary-links="true" rotate="false" num-pages="numPages">
</uib-pagination>
<pre>Page: {{bigCurrentPage}} / {{numPages}}</pre>
</div>
一般controller中定义这几个变量
$scope.maxSize = 4;
$scope.bigCurrentPage = 4;
$scope.bigTotalItems = 400;
在实际使用中根据当前页的改变发出请求从后台获取bigTotalItems，如下
app.controller('myCtrl', ['$scope', '$timeout', function($scope, $timeout) {
$scope.maxSize = 4;
$scope.bigCurrentPage = 4;

$scope.$watch('bigCurrentPage', function(newValue){
//从后台获取数据
$timeout(function() {
$scope.bigTotalItems = 400;
}, 2000)

})
}]);
以上模仿2s获取到了bigTotalItems的值。
这么写是没什么问题的。但是如果你把newValue打印一下你发现newValue先是4然后变成了1.
4意料之中，但是1是为什么。如果没什么特殊需求时不用管它的。但我想实现页面刷新后留在原来的页面，也就是刷新之前为4刷新之后也是4.实现方法很多，假设你实现了然后把值赋给了bigTotalItems。这时一开始的问题就出现了，先变成正确的值然后又变成了1，这样就前功尽弃。
调试了一会发现原来因为一开始没有给bigTotalItems赋值，请求又是异步请求，等程序运行结束发现bigTotalItems你没给它赋值，就是undefined，而在源码里，可以看到
$scope.$watch('totalItems', function(newValue) {
$scope.totalPages = self.calculateTotalPages();
});
虽然是undefined，但是也触发了self.calculateTotalPages()的运行。
this.calculateTotalPages = function() {
var totalPages = this.itemsPerPage < 1 ? 1 : Math.ceil($scope.totalItems / this.itemsPerPage);
return Math.max(totalPages || 0, 1);
};
由于totalItems的undefined导致最后return了1.也就是totalPages为1.你的bigCurrentPage >totalPages, 那就会导致bigCurrentPage重置为1.
知道了原因就可以解决，要么同步请求，要么一开始就先给totalItems赋值，并且保证最后计算的totalPages > bigCurrentPage.