Question

我正在尝试编写一个AngularJS指令来帮助我进行分页。我希望用户在搜索某些内容时能够看到最多5个编号的链接（1,2,3,4,5）。如果结果超过5页，他们将能够点击箭头＆gt;并查看链接6 - 10等。

这是我到目前为止所做的，请注意我不知道如何完成'element.attr'行：

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

html是：

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

Answer 1

为什么不使用模板和角度重复？像这样的东西：

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

这是一个示例：

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

我为我的项目实现了类似的东西。请检查以下代码。在任何具有垂直滚动的html元素上使用此指令。

(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>

如何为分页编写AngularJS指令？

2 个答案: