AngularJS обновляет область действия ng-click с контроллера

Я создаю ng-repeat и использую ng-модель, изменяя количество видимых элементов, это работает нормально. Также я создаю разбиение на страницы с помощью ng-click и ng-class, и вот здесь у меня возникла проблема.

Я определяю некоторые переменные в области действия контроллера, такие как лимит количества, общее количество страниц, текущая страница, например:

// definitions
$scope.clients;
$scope.clientsAmount;

// amount of visible clients
$scope.limitArray = [8,12,16];
$scope.clientsLimit = 8;

// function to get the amount of pages
function getPages(els, limit) {
    // get the total pages considrering the amount of elements
    $scope.totalPages = Math.ceil(els/limit);
    $log.log( 'get - total => ', $scope.totalPages );
}

Затем у меня есть некоторые функции для перехода на следующую/предыдущую страницу. При загрузке страницы они работают нормально, но когда я меняю сумму clientLimit, даже если значение области действия контроллера обновляется (используя $watch, я снова вызываю функцию getPages, используя новое значение clientLimit), но когда я нажимаю кнопки с помощью ng- click значения для страниц не изменяются. Параметр должен проверить, является ли это последней/первой или следующей/предыдущей кнопками.

// NEXT BUTTON
    $scope.nextBtn = function(param){
        $log.log( 'value => ',  value );
        // check if this is not the last page and the param is true
        // go to the next page
        if( $scope.currentPage !== $scope.totalPages && param ) {

            $scope.currentPage++;

        } else if (!param) {

            $scope.currentPage = $scope.totalPages;

        }// conditional end

    };// next button end

// PREVIOUS BUTTON
    $scope.prevBtn = function(param){

        // check if this is not the first page and the param is true
        // go to the preivious page
        if( $scope.currentPage !== 1 && param ) {

            $scope.currentPage--;

        } else if ( !param ) {

            $scope.currentPage = 1;

        }// conditional end

    };// previous button end

Это HTML

<li ng-class="firstPageCheck()">
  <a href aria-label="First" ng-click="prevBtn(false)">
    <span aria-hidden="true">First</span>
  </a>
</li>

<li ng-class="firstPageCheck()">
  <a href aria-label="Previous" ng-click="prevBtn(true)">
    <span aria-hidden="true">Previous</span>
  </a>
</li>

<li ng-class="lastPageCheck()">
  <a href aria-label="Next" ng-click="nextBtn(true, value=totalPages)">
    <span aria-hidden="true">Next</span>
  </a>
</li>
<li ng-class="lastPageCheck()">
  <a href aria-label="Last" ng-click="nextBtn(false, value=totalPages)">
    <span aria-hidden="true">Last</span>
  </a>
</li>

Как я уже сказал, ng-class и ng-click не отражают изменения в области действия контроллера.

Вот plunkr с файлами и данными JSON:

http://plnkr.co/edit/eVSW449vJ5cv6WWvyJhc?p=info

=======================================

ИЗМЕНИТЬ

Привет. По сути, это "Я идиот, редактировать": P. Оказывается, я добавлял более одного экземпляра контроллера, поэтому выбранная ng-модель обновляла только этот экземпляр контроллера, в то время как другие (да... в какой-то момент я включил до 3: S) сохраняли установленное значение во время выполнения.

Вот обновленная ссылка Plunker только с одним экземпляром контроллера, и все работает нормально с нумерацией страниц: http://plnkr.co/edit/eVSW449vJ5cv6WWvyJhc


person Rodrigo    schedule 22.03.2016    source источник


Ответы (1)


Я посмотрел ваш код и не нашел import angular-ui, потому что вы используете разбиение на страницы. Проверьте: https://angular-ui.github.io/bootstrap/ и простой пример :

 'http://plnkr.co/edit/xxjIBw71hDp9AHSrEhfp?p=preview
person Daniel Kuta    schedule 22.03.2016
comment
Спасибо, Даниил!! Попробую. Никогда не думал о том, чтобы пойти по этому пути, поскольку создание пользовательского фильтра и добавление некоторых функций с использованием встроенных директив не казалось слишком сложным, я никогда не рассматривал возможность использования других директив, так как в конечном итоге я превращу разбивку на страницы в пользовательскую директиву. - person Rodrigo; 23.03.2016