Question

我正在为Angular 1设计自定义分页指令，但数据绑定似乎无法正常工作。 currentPage 属性似乎可以毫无问题地更新，但是我的 numberOfPages 属性在DOM中似乎没有更新。此外，我还有一个下一个和上一个按钮，它们会根据当前页面被禁用，但是只有其中一个表达式似乎被正确评估。这是我的代码：

我的指令：

angular.module('testModule').directive('pagination', ['_', function(_) {
return {
  restrict: 'E',
  templateUrl: 'templates/pagination.html',
  scope: {
    currentPage: '=',
    numberOfPages: '@',
    onPageSelected: '&',
  },
  controller: function($scope){
    $scope.pageNumbers = [1];

    $scope.$watch('numberOfPages', function(){
      if($scope.numberOfPages > 1){
        $scope.pageNumbers = _.range(1, $scope.numberOfPages);
      }
      else{
        $scope.pageNumbers = [1];
      }
    })

    $scope.selectPage = function(pageNo){
      if(pageNo < 1){
        $scope.currentPage = 1;
      }
      else if(pageNo >= $scope.numberOfPages){
        $scope.currentPage = $scope.numberOfPages;
      }
      else {
        $scope.currentPage = pageNo;
      }

      $scope.onPageSelected()($scope.currentPage);
    }
  }
};
}]);

我的模板：

<div>
<button class="paginationTab" ng-click="selectPage(currentPage - 1)" ng-disabled="currentPage <= 1">&#60;</button>
<button ng-repeat="pageNo in pageNumbers track by pageNo"
        ng-class="pageNo == currentPage ? 'selected paginationTab' : 'paginationTab'" 
        ng-click="selectPage(pageNo)">
    {{pageNo}}
</button>
<button class="paginationTab" ng-click="selectPage(currentPage + 1)" ng-disabled="currentPage >= numberOfPages">&#62;</button>
</div>

currentPage 和 numberOfPages 都应为数字。 onPageSelected 是一个以页码为参数的函数。我正在使用npm加载角度v1.7.2 和下划线v1.9.1 。

正在使用的指令：

<pagination current-page="currentPage" number-of-pages="numberOfPages()" on-page-selected="onPageSelected"></pagination>

我不明白为什么这段代码无法按预期工作（每个页面应该有一个按钮，但是没有，并且无论下一个按钮的最大数量有多远，“ next”按钮都不会被禁用）页面）。有人可以看到此指令有什么问题吗？

自定义分页指令未正确更新

0 个答案: