Angularjs：dir-pagination-controlsは、ページボタンを押した後でも、次のページを表示しません。

Question

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

UPDATEpageChangeHandlerショーはどのボタンは押されましたが、ページが変更されません。 （他のすべては問題ありません）

このコードはthe official document and its demoに基づいていますが、実際には間違っているものは見つかりません。

アドバイスをいただければ幸いです。

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