如何编写分页的AngularJS指令？

Question

I am trying to write an AngularJS Directive that helps me with pagination. I want the user to be able to see up to 5 numbered links (1, 2, 3, 4, 5) when searching for something. If there are more than 5 pages of results they will be able to click an arrow > and see links 6 - 10 and so on.

This is what I have so far, note that I am not sure how to complete the 'element.attr' line:

var ReportsApp = angular.module('ReportsApp', []);

ReportsApp.directive('paginate', function () {
    return {
        restrict: 'A',
        transclude: true,
    scope: {
        page: '=page'
    },
    link: function (scope, element, attrs) {
        var page = scope.page;
        updatePage();

        function updatePage() {
            if (page <= 5) {
                for (page = 1; page <= 5; page++) {
                    element.attr('paginate')
                }
            }
        }
    }
}
});

The html is:

  <div id="pages">
    <a href="#" paginate page="p"></a>
  </div>

Answer 1

Why not using a template and angular ng-repeat instead? something like this:

template: '<div id="pages">
            <a href="#" paginate page="n" ng-repeat="n in pages" ></a>
        </div>'

here is a sample where this goes:

return {
        restrict: 'A',
        transclude: true,
    scope: {
        page: '=page'
    },
    template: '<div id="pages">
        <a href="#" paginate page="n" ng-repeat="n in pages" ></a>
    </div>'
    link: function (scope, element, attrs) {
    ...

Answer 2

I have implemented something like similar for my project. Please check the below code. User this directive on any html element which is having vertical scrolling .

 (function(ng) { 'use strict'; ng.module('commonUtilsModule') /** This directive used to load records from backend when mouse is scrolling down */ .directive('fosWhenScrolled', function() { return function(scope, elm, attr) { var raw = elm[0]; elm.bind('scroll', function() { if (raw.scrollTop + raw.offsetHeight >= raw.scrollHeight) { scope.$apply(attr.whenScrolled); } }); }; }); }(angular)); 

 <div class="col-xs-12" fos-when-scrolled="fetchResults()"></div>