javascript - AngularJS 从 Controller 更新 ng-click 范围

Question

我正在创建一个 ng-repeat 并使用 ng-model 更改可见元素的数量，这效果很好。另外，我正在使用 ng-click 和 ng-class 创建分页，这就是我遇到问题的地方。

我在 Controller 的范围内定义了一些变量，例如 amount-limit、total-pages、current-page，如下所示:

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

然后我有一些功能可以转到下一页/上一页。在页面加载时，这些工作正常，但是当我更改clientsLimit数量时，即使 Controller 的范围值已更新(使用$watch，我使用clientsLimit的新值再次调用getPages函数)，但是当我使用 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 没有反射(reflect) Controller 范围的变化。

这是包含文件和 JSON 数据的 plunkr:

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

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

编辑

嗨。基本上这就是“我是个白痴编辑”:P。事实证明，我添加了多个 Controller 实例，因此选择的 ng-model 只更新该 Controller 实例，而其他实例(是的...在某个时候我最多包含 3 个:S)保留设置的值在运行时。

这是一个更新的 Plunker 链接，其中只有一个 Controller 实例，并且分页一切正常: http://plnkr.co/edit/eVSW449vJ5cv6WWvyJhc

Answer 1

我查看了您的代码，但没有找到 import angular-ui，因为您使用了分页。查看:https://angular-ui.github.io/bootstrap/和简单的例子:

 'http://plnkr.co/edit/xxjIBw71hDp9AHSrEhfp?p=preview