具有隔离范围的AngularJS分页指令

Question

I have the following pagination directive written by a member of my team:

myApp.directive('pagination', function($timeout) {
    return {
        restrict: 'A',
        controller: function($scope, $element, $attrs, $rootScope) {
            var halfDisplayed = 1.5,
                    displayedPages = 3,
                    edges = 2;
            $scope.getInterval = function() {
                return {
                    start: Math.ceil($scope.currentPage > halfDisplayed ? Math.max(Math.min($scope.currentPage - halfDisplayed, ($scope.pages - displayedPages)), 0) : 0),
                    end: Math.ceil($scope.currentPage > halfDisplayed ? Math.min($scope.currentPage + halfDisplayed, $scope.pages) : Math.min(displayedPages, $scope.pages))
                };
            };
            $scope.selectPage = function(pageIndex) {
                $scope.currentPage = pageIndex;
                $scope.$apply();
                $scope.draw();
                $scope.paginationUpdate();
            };
            $scope.appendItem = function(pageIndex, opts) {
                var options, link;

                pageIndex = pageIndex < 0 ? 0 : (pageIndex < $scope.pages ? pageIndex : $scope.pages - 1);

                options = $.extend({
                    text: pageIndex + 1,
                    classes: ''
                }, opts || {});

                if (pageIndex === $scope.currentPage) {
                    link = $('<span class="current">' + (options.text) + '</span>');
                } else {
                    link = $('<a href="javascript:void(0)" class="page-link">' + (options.text) + '</a>');
                    link.bind('click', function() {
                        $scope.selectPage(pageIndex);
                    });
                }

                if (options.classes) {
                    link.addClass(options.classes);
                }

                $element.append(link);
            };
            $rootScope.draw = function() {
                $($element).empty();
                var interval = $scope.getInterval(),
                        i;

                // Generate Prev link
                if (true) {
                    $scope.appendItem($scope.currentPage - 1, {
                        text: 'Prev',
                        classes: 'prev'
                    });
                }

                // Generate start edges
                if (interval.start > 0 && edges > 0) {
                    var end = Math.min(edges, interval.start);
                    for (i = 0; i < end; i++) {
                        $scope.appendItem(i);
                    }
                    if (edges < interval.start) {
                        $element.append('<span class="ellipse">...</span>');
                    }
                }

                // Generate interval links
                for (i = interval.start; i < interval.end; i++) {
                    $scope.appendItem(i);
                }

                // Generate end edges
                if (interval.end < $scope.pages && edges > 0) {
                    if ($scope.pages - edges > interval.end) {
                        $element.append('<span class="ellipse">...</span>');
                    }
                    var begin = Math.max($scope.pages - edges, interval.end);
                    for (i = begin; i < $scope.pages; i++) {
                        $scope.appendItem(i);
                    }
                }

                // Generate Next link
                if (true) {
                    $scope.appendItem($scope.currentPage + 1, {
                        text: 'Next',
                        classes: 'next'
                    });
                }
            };
        },
        link: function(scope, element, attrs, controller) {
            $timeout(function() {
                scope.draw();
            }, 2000);
            scope.$watch(scope.paginatePages, function() {
                scope.draw();
            });
        },
        template: '<div class="pagination-holder dark-theme">' + '</div>',
        replace: true
    };
});

Unfortunately, when he wrote it, the directive refered to controller variables and functions:

function PatientListModalConfigCtrl($scope, $rootScope, myService) {
    $scope.currentPage = 0;
    $scope.paginationUpdate = function() {
        var list = myService.search($scope.currentPage + 1);
        list.then(function(data) {
            $rootScope.List = data[1];
            $rootScope.pages = data[0];
        });
    };
};

I was able to replace the function call with $scope[](); using the attr parameter, but as soon as I try to add:

scope: {
    currentPage: '=',
    totalPages: '='
}

into the directive and isolate the directive from the controller, the pagination stops displaying altogether. Can I use the attr parameter for these two variables as well? I would prefer to use the scope in the directive because the variables will be changing, but my attempts have failed. I would appreciate any feedback.

Answer 1

Unfortunately, I have to say the whole directive looks a bit poorly designed. The dependancy on $rootScope is a big code smell, so is all the injecting of HTML in the controller.

To get on topic, you are two-way binding to primitives (integers). I am not entirely sure that's your entire problem, but it won't work as you expect. It's very logical once you think about it, how could AngularJS ever put any data back into (ie update) a primitive?

By the look of it, you don't actually want two-way binding, you just need to send in some values. For such simple data you can define them as attributes ('@'), and then use attrs.$observe() to listen to the changes. As for the HTML, you can then use current-page="{{currentPage}}" to pass in the value (please note, it will be as a string, which you can then parse back).

Another option could be to pass in an object (using two-way binding). Example:

page = {
    currentPage: 3,
    totalPages: 14
}