angularJS pagination не читает текущий номер страницы

Question

Я пытаюсь реализовать ui.bootstrap.pagination в моем проекте angularJS, но я не могу читать текущий номер страницы, хотя я установил ng-model. Я использую угловую ui-bootstrap версию 0.13.3.

Соответствующая часть моего HTML:

<pagination 
     data-ng-model="currentPage" 
     data-ng-change = "paginate()" 
     data-total-items="repositories.total_count" 
     data-items-per-page="numPerPage" 
     data-max-size="maxSize" 
     data-boundary-links="true" > 
    </pagination> 

И мой код:

angular.module('myApp.repositories') 
.controller('RepositoryController', ['$scope', function($scope) { 
    $scope.repositories = {}; 
    $scope.currentPage = 1; 
    $scope.numPerPage = 30; // Number of items per page, set by Github API 
    $scope.maxSize = 10; // Number of pages to show in pagination 

    $scope.paginate = function() {  
    $http.get('https://api.github.com/search/repositories/', { 
     params: { 
     q: 'twitter', 
     page: $scope.currentPage 
     } 
    }) 
    .then(function(response){ 
     if(response.data){ 
      $scope.repositories = response.data; 
     } 
    }); 
    }; 
}]); 

пагинацию показывает, как ожидалось, и я могу использовать его без него бросали ошибки, но в моем постраничной() function $ scope.currentPage всегда читает 1.

Я мог бы пропустить что-то очень простое, но я не могу понять, почему он не работает.

Answer 1

Всегда используйте точку в своей модели. Попробуйте это:

<pagination 
    data-ng-model="vm.currentPage" 

...

$scope.vm = {currentPage: 1}; 

Для предотвращения такого рода проблемы, использовать controllerAs и избегать использования $scope в качестве модели.

Смотрите это руководство: https://github.com/johnpapa/angular-styleguide#controllers

Причина это происходит потому, что некоторые директивы создает область в этом элементе, и из-за способа связаны прицелы (наследование), ваше имущество заканчивает тем, что слежка, так тот, что на ребенке, отличается от такового на родительском.

Это довольно раздражает и усложняется, поэтому лучший способ справиться с этим - совсем не так. Не помещайте вещи в свой $scope отдельно от ссылки на фактическую модель (например, экземпляр контроллера, который облегчается механизмом controllerAs)

Answer 2

Я на несколько месяцев опоздал на это, но хочу сделать уверенные будущие читатели этого вопроса не смущаются. Использование $ scope совершенно справедливо и на самом деле довольно хороший способ начать работу с AngularJS. Синтаксис «Контроллер как» не является обязательным.

Решение здесь довольно просто: передайте выбранный номер страницы в функцию «Paginate». Затем используйте это значение для установки $ scope.currentPage.

angular.module('myApp.repositories') 
.controller('RepositoryController', ['$scope', function($scope) { 
$scope.repositories = {}; 
$scope.currentPage = 1; 
$scope.numPerPage = 30; // Number of items per page, set by Github API 
$scope.maxSize = 10; // Number of pages to show in pagination 

$scope.paginate = function(pageNumber) { 
    $scope.currentPage = pageNumber; 
    $http.get('https://api.github.com/search/repositories/', { 
    params: { 
    q: 'twitter', 
    page: $scope.currentPage 
    } 
    }) 
    .then(function(response){ 
    if(response.data){ 
     $scope.repositories = response.data; 
    } 
    }); 
}; 
}]);