angular-bootstrap-ui's pagination ng-change 事件在页面加载时会执行两次

bootstrap-ui pagination的一个坑!

问题描述:
当用来自 $state 相应的页索引来初始化Controller时发生,angular-bootstrap-ui的 pagination 指令会初始化和触发 ng-change 事件并把页码重置为1,导致无法正确跳转到指定页面。("angular-ui-bootstrap": "^0.13.3")


解决方式:
在pagination外边加ng-if判断total-items对应的总条数modal值是否大于0

例如:

<div class="row text-center" ng-if="vm.total">
      <pagination total-items="vm.total" items-per-page="vm.pagination.pageSize"
                  ng-model="vm.pagination.page" max-size="maxSize" 
                  class="pagination bootpag"
                  num-pages="totalPages" ng-change="vm.pageChanged()" 
                  ng-click="vm.clickPagination()">     
     </pagination>
</div>

原因:

查看bootstrap-ui源码,会发现它监听了totalPages,并判断当前页索引是否大于总页数,假如,当我们位于第3页,并刷新了页面,该页面会立即为页面重新加载数据列表,造成 total-items 变为0,totalPages就会被计算为1。然后就触发了上面提到的代码的监听器。外面加ng-if就是避免了pagination过早的做了错误的计算。

也可以把数据加载放到ui-router的resolve中。

参考:

  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值