AngularJS提供了多种方式来实现分页，其中一种常见的是通过Directive实现分页功能。

步骤如下：

1. 创建Directive

app.directive('pagination', function() {
    return {
        restrict: 'AE',
        replace: true,
        scope: {
            currentPage: '=',
            numPerPage: '=',
            totalItems: '=',
            onSelectPage: '&'
        },
        templateUrl: 'templates/pagination-template.html',
        link: function(scope, element, attrs) {
            scope.numPages = function() {
                return Math.ceil(scope.totalItems / scope.numPerPage);
            };

            scope.isActive = function(page) {
                return scope.currentPage === page;
            };

            scope.selectPage = function(page) {
                if (!scope.isActive(page)) {
                    scope.currentPage = page;
                    scope.onSelectPage({ page: page });
                }
            };

            scope.getPages = function() {
                var pages = [];
                var numPages = scope.numPages();
                var startPage = Math.max(1, scope.currentPage - 2);
                var endPage = Math.min(numPages, scope.currentPage + 2);

                for (var i = startPage; i <= endPage; i++) {
                    pages.push(i);
                }

                return pages;
            };
        }
    };
});

2. 创建HTML模板

    

        First
    
    

        Previous
    
    

        {{ page }}
    
    

        Next
    
    

        Last
    

3. 在Controller中使用Directive

app.controller('MyCtrl', function($scope) {
    $scope.currentPage = 1;
    $scope.numPerPage = 10;
    $scope.totalItems = 100;

    $scope.$watch('currentPage', function(newPage) {
        console.log('Page changed to: ' + newPage);
    });

    $scope.pageChanged = function(page) {
        console.log('Page changed to: ' + page);
    };
});

4. 在HTML中引入Directive

    

        Current Page: {{ currentPage }}
    
    

        Num Per Page: {{ numPerPage }}
    
    

        Total Items: {{ totalItems }}
    
    

这个例子中演示了一个简单的分页功能，通过Directive实现了分页的核心逻辑，包括计算页码数量、判断当前页码是否激活、选择页码等功能。在Controller中通过监控currentPage变量的变化来响应用户的操作，通过pageChanged回调来处理分页业务逻辑。在HTML中通过调用pagination的Directive来实现分页功能的UI展示。 免责声明：本文内容通过AI工具匹配关键字智能整合而成，仅供参考，火山引擎不对内容的真实、准确或完整作任何形式的承诺。如有任何问题或意见，您可以通过联系service@volcengine.com进行反馈，火山引擎收到您的反馈后将及时答复和处理。