Angular Typescript Directives and Utilities

angular-paging.ts

module App {
        export class PagedList<T>{
        private page: number;
        private list: IList<T>;
        private items: T[];
        private itemsPerPage: number;
        private numOfPages: number;
        private count: number;

        constructor(list: IList<T>, itemsPerPage = 10) {
            this.page = 1;
            this.itemsPerPage = itemsPerPage;
            this.Bind(list);
        }

        Bind(list: IList<T>) {
            this.list = list;

            this.list.Count().then(i => {
                this.count = i;
                this.numOfPages = Math.floor(i / this.itemsPerPage);
                if (i % this.itemsPerPage > 0) this.numOfPages++;
            });

            this.Fetch();
        }

        NextPage() {
            if (this.page < this.numOfPages) {
                this.page++;
                this.Fetch();
            }
        }

        CurrentPage(): number {
            return this.page;
        }

        previousPage() {
            if (this.page > 1) {
                this.page--;
                this.Fetch();
            }
        }

        Goto(page: number) {
            if (page > 0 && page <= this.numOfPages) {
                this.page = page;
                this.Fetch();
            }
        }

        Count(): number {
            return this.count;
        }

        Pages(): number {
            return this.numOfPages;
        }

        Items(): T[] {
            return this.items;
        }

        ItemsPerPage() {
            return this.itemsPerPage;
        }

        private Fetch() {
            this.list.Slice((this.page - 1) * this.itemsPerPage, this.itemsPerPage).then(i => this.items = i);
        }
        
        PageLowerBoundary():number {
            return ((this.page - 1) * this.itemsPerPage) + 1
        }

        PageUpperBoundary(): number {
            return ((this.page - 1) * this.itemsPerPage) + this.itemsPerPage
        }
    }

    export interface IList<T> {
        Count(): ng.IPromise<number>;
        Slice(skip: number, take: number): ng.IPromise<T[]>;
    }
}

module App.Directives {
    class PageCtrl {

        page: PagedList<any>;

        static $inject = ["$scope"];
        constructor($scope) {
            this.page = $scope.page;
        }

        next() {
            this.page.NextPage();
        }

        prev() {
            this.page.previousPage();
        }

        goto(index: number) {
            this.page.Goto(index + 1);
        }

        isCurrentPage(item) {
            return this.page.CurrentPage() == item + 1;
        }

        links() {
            var page = this.page;
            var arr = [];
            if (page && page.Pages() > 0) {

                var curr = page.CurrentPage();
                var count = page.Pages();

                var k = 4;

                //Get Index Bounds
                var kl = curr - k;
                var kr = curr + k;

                //Handle Left Overflow
                if (kl < 0) {
                    kr = kr + (kl * -1)
                    kl = 0;
                }

                //Handle Right Overflow
                if (kr > count) {
                    kl = kl - (kr - count);
                    kr = count;
                }

                //Handle Recursive Left Overflow
                if (kl < 0) {
                    kl = 0
                }

                //Plot Range
                for (var x = kl; x < kr; x++) {
                    arr.push(x);
                }
            }

            return arr;
        }
    }

    var Directive = function (): ng.IDirective {
        return {
            restrict: "EA",
            templateUrl: "template/paging/pager.html",
            scope: {
                page: "="
            },
            controller: PageCtrl,
            controllerAs: "model"
        };
    };

    App.module.directive("odPager", Directive);
}

pager.html

<script id="template/paging/pager.html" type="text/ng-template">
    <ul class="pagination" ng-show="model.links().length > 1" >
        <li><a style="cursor:pointer" ng-click="model.prev()">&laquo;</a></li>
        <li ng-class="{active:model.isCurrentPage(item)}" ng-repeat="item in model.links()"><a style="cursor:pointer" ng-click="model.goto(item)">{{item + 1}}</a></li>
        <li><a style="cursor:pointer" ng-click="model.next()">&raquo;</a></li>
    </ul>
</script>