Angularjs：dir-pagination-controls 不显示下一页，即使在按下页面按钮后也是如此答案

【问题标题】：Angularjs: dir-pagination-controls doesn't show the next page, even after the page button is pressedAngularjs：dir-pagination-controls 不显示下一页，即使在按下页面按钮后也是如此
【发布时间】：2016-08-18 05:46:06
【问题描述】：

我一直在尝试合并dir-pagination-controls，但无法根据所选页面显示页面。

<div ng-controller="TableController as tc">
    <table>
        <tbody dir-paginate="order in tc.orders | itemsPerPage: 10" total-items="tc.totalOrders" current-page="currentPage">
            <tr ng-click="tc.showOrderDetail(order.id)">
                <td ng-bind="order.id"></td>
                <!-- Simliar lines are here -->
            </tr>
        </tbody>
    </table>
    <dir-pagination-controls 
       boundary-links="true" 
       on-page-change="tc.pageChangeHandler(newPageNumber)" 
       template-url="dirPagination.tpl.html">
    </dir-pagination-controls>
</div>

这个table 显示了我的期望。但是，当我按下任何按钮时，生成的分页控制器不会显示下一页。

这是脚本的相关部分。

angular.module('adminAngular', ['ui.bootstrap','dialogs.main','angularUtils.directives.dirPagination'])
.controller('TableController', function($http){

    var instance = this;

    this.orders = [];
    $http({
        //works fine
    }).then(function (response) {
        instance.orders = response.data;
        instance.totalOrders = instance.orders.length;
        //The "instance.orders" gets the expected data, and used for in dir-paginate="order in tc.orders
    });

    this.pageChangeHandler = function(num) {
        console.log('going to page ' + num);
    };

    this.pageChanged = function(newPage) {
        getResultsPage(newPage);
    };

更新 pageChangeHandler 显示按下了哪个按钮，但页面没有改变。（其他都很好。）

这段代码基于the official document and its demo，但我找不到真正的错误。

如果您能提供任何建议，我将不胜感激。

【问题讨论】：

不应该是 on-page-change="pageChangeHandler(newPageNumber)" 行 on-page-change="tc.pageChangeHandler(newPageNumber)" 吗？
你是对的！！我会修复这个帖子...
您是否在任何地方调用 this.pageChanged() 方法？我猜你可能不得不从 pageChangedHandler() 函数中调用它。

标签： javascript php angularjs pagination dirpagination

【解决方案1】：

解决方案是从您的 dir-paginate 指令中删除 total-items。这是一个带有简单示例的plunker。

total-items 属性用于异步调用以获取每个页面项目。因此，第一次异步调用您获取第一页的项目，当您更改页面时，您应该从服务器获取相应页面的项目。 total-items 告诉分页指令你总共有多少页，所以它知道如何构建元素。

如果您想对每个页面进行异步调用，请使用 total-items 并在执行另一个异步调用的地方实现 pageChanged。

$scope.pageChanged = function(newPage) {
   // get orders for newPage number
   $http.get(...).then(function(response) {
       // orders for newPage number fill the same 'orders' array
       this.orders = response.data
   });
}

【讨论】：