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

I've been trying to incorporate dir-pagination-controls, but can't work display the page based on the chosen page.

我一直在尝试合并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>

This table shows what I expect. However, the resulting pagination controller doesn't show the next page when I press any of its buttons.

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

Here is a relevant part of the script.

这是脚本的相关部分。

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);
    };

UPDATE The pageChangeHandler shows which button was pressed, but the page doesn't change. (Everything else is fine.)

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

This code is based on the official document and its demo,but I can't find what is actually wrong.

此代码基于官方文档及其演示，但我找不到实际上的错误。

I'd appreciate if you give any advice.

如果你提出任何建议，我将不胜感激。

1 个解决方案

#1

The solution is to remove total-items from your dir-paginate directive. Here is a plunker with the simple example.

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

The total-items attribute is used when you do async calls to get each page items. So, first async call you get items for first page, and when you change the page you are supposed to get from the server the items for the corresponding page. The total-items tell the pagination directive how many pages you have in total, so it knows how to build the element.

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

If you want an async call for each page, you use total-items and you implement pageChanged where you do another async call.

如果您希望为每个页面执行异步调用，则可以使用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
   });
}

#1