ui-bootstrap分页在初始化时重置当前页面

Question

我正在使用ui-bootstrap(angular-bootstrap)库中的分页指令.初始化时我遇到了问题.当我通过url导航到特定页面时,会出现问题.

发生的事情是我的控制器使用$ stateParams中的正确页面进行初始化,然后分页指令初始化并触发ng-change函数,该函数将页面重置为1.现在不再使用on-select-page,是否存在一种只捕获用户点击以更改页面的方法？理想情况下,我希望指令在控制器之前初始化,以便我的页面不会被重置.先感谢您.

如果需要,我可以包含代码,但我觉得我的问题不一定需要代码块.

Answer 1

因此,我深入研究了角度引导代码后找到了一个解决方案.他们的代码有一个关于totalPages的监视,它检查当前页面是否大于totalPages值.

angular-bootstrap代码:

if ( $scope.page > value ) {
  $scope.selectPage(value);
} else {
  ngModelCtrl.$render();
}

发生的事情是如果我刷新第3页上的页面(例如)我的控制器正在重新加载该页面的项目,暂时导致总项目为0,totalPages计算为1.这触发了手表和上面的代码.

我的解决方案是在状态解析中加载项目,以便总项目(以及totalPages)总是准确的.

Answer 2

如果您不想使用state解析数据,那么您只需ng-if在paginator上添加一个指令即可.假设$scope.total_count用于绑定total-items属性,您可以执行以下操作:

<pagination data-ng-if="total_count"
            total-items="total_count"
            ng-model="applied_filters.page"
            max-size="maxSize"
            class="pagination-sm"
            boundary-links="true"
            rotate="false"
            class="nomargin"
            num-pages="numPages"></pagination>

这样,当您从服务器获取总计数并且currentPage不会大于totalPages时,该指令始终被初始化

Answer 3

该ng-if指令对我没有预期效果(我没有使用controllerAs语法):分页无法再更新$scope.currentPage变量.解决方案是使用ng-model="$parent.currentPage"而不是ng-model="currentPage".

<uib-pagination ng-if="totalItems"
                total-items="totalItems"
                items-per-page="itemsPerPage"
                ng-model="$parent.currentPage">
</uib-pagination>