Требуется ли Pagination собственный контроллер?

Question

Извините, угловой новичок. Я играю весь день и не могу получить свою разбивку на страницы, чтобы ответить на данные. Там просто не существует никакой связи между моей директивой и контентом. Могу ли я разместить информацию разбивки на страницы в том же контроллере, что и на остальной части страницы? Я пытаюсь ограничить список объектов до пяти на страницу. Я скопировал код из JS и попытался преобразовать его в машинопись, что также может быть проблемой.

Вот мой контроллер:

export class HomeController { 
    public challenges; 
    public challengesCompleted; 
    //public allCompletedChallenges; 
    public totalItems = 1; 
    public currentPage = 1; 
    public maxSize = 1; 
    public bigTotalItems = 1; 
    public bigCurrentPage = 1; 
    public setPage(pageNo) { 
     this.currentPage = pageNo; 
    }; 



    constructor 
     (
     private challengeService: MyApp.Services.ChallengeService, 
     private $location: angular.ILocationService, 
     $routeParams: ng.route.IRouteParamsService 
     ) { 
     this.challenges = this.challengeService.listChallenges(); 
     this.challengesCompleted = this.challengeService.list10FinishedChallenges(); 
     this.maxSize = 5; 
     this.bigTotalItems = 5; 
     this.bigCurrentPage = 5; 

     //this.allCompletedChallenges = this.challengeService.listAllCompletedChallenges(); 
    } 


} 

и HTML:

   <div class="row" ng-repeat="challenge in controller.challenges | filter: globalSearch"> 
        <div class="col-md-12"> 
         <div class="row"> 
          <div class="col-md-6"> 
           <h4> 
            Created By: {{challenge.challenger}} 
           </h4> 
          </div> 
          <div class="col-md-6"> 
           <h4>{{challenge.dateCreated | date: 'longDate'}}</h4> 
          </div> 
         </div> 
         <div class="row"> 
          <div class="col-md-6"> 
           <h4>Title: <b>{{challenge.title}}</b></h4> 
          </div> 
          <div class="col-md-6"> 
           <h4>Bet Amount: {{challenge.amount}}</h4> 
          </div> 
         </div> 
         <div class="row"> 
          <div class="col-md-12"> 
           <h4> 
            Description 
           </h4> 
           {{challenge.description}} 
          </div> 
         </div> 
         <div class="row"> 
          <div class="col-md-12"> 
           <a ng-hide="challenge.challengee!=null || !account.isLoggedIn() || account.getDisplayName() == challenge.challenger" href="/acceptChallenge/{{challenge.id}}"><b>ACCEPT THIS CHALLENGE!</b></a> 
           <a ng-show="!account.isLoggedIn() && challenge.challengee == null" href="/login"><b>YOU MUST BE LOGGED IN TO ACCEPT THIS CHALLENGE.</b></a> 
           <p ng-show="challenge.challengee!=null"><b><i>Challenge has been accepted by {{challenge.challengee}} and is in progress.</i></b></p> 
          </div> 
          <div class="col-md-12 linebreak"> 

      <br /> 
     </div> 
        </div> 
       </div><br /><br /> 
      </div> 
          <uib-pagination total-items="totalItems" ng-model="controller.currentPage" items-per-page=5 max-size="5" class="pagination-sm" boundary-link-numbers="true"> 
          </uib-pagination> 

     </div> 
    </div> 
</div> 

Спасибо за любую помощь.

Answer 1

Вы, кажется, не быть с помощью атрибута UIB-пагинацией ng-change, вы, вероятно, необходимо связать его с методом, где фактический подкачки должно произойти

что-то вроде этого,

$scope.pageChanged = function(){ 
    $scope.pagedChallanges = $scope.challanges.splice.... 
} 

и, вероятно, вам нужно привязать pagedChallanges к представлению.

, но лучший подход будет выполнять пейджинг на сервере, а при изменении страницы отправьте вызов на сервер, чтобы получить требуемую страницу.