[AngularJS] (basic) custom pagination.next|prev

pagination.js

+(function(angular, _, undefined) {
  function pagination() {
    // Data, collection of objects
    var scope = {
      paging: '=',
      nextCallback: '&',
      nextPrePhaseCallback: '&',
      nextPostPhaseCallback: '&',
      prevCallback: '&',
      prevPrePhaseCallback: '&',
      prevPostPhaseCallback: '&',
      customClasses: '@'
    };

    return {
      scope: scope,
      // replace: true,
      restrict: 'EA',
      template: getTemplate
    };

    /**
     * @name getTemplate
     * @description Returns the template string
     * @param {Object} element
     * @param {Object} attrs
     * @return {String}
     */
    function getTemplate(element, attrs) {
      var template = [
      '<div class="{{ customClasses }}">',
        '<button type="button" class="btn btn-default" ss-pagination-step callback="prevCallback()" ',
          'ng-disabled="paging.previous === undefined">',
            '<i class="ion-chevron-left"></i>',
          '</button>',
            
          '<span class="paging-info">',
            '<strong>',
                '<span ng-bind="paging.start_count"></span>',
                  ' - ',
                '<span ng-bind="paging.end_count"></span>',
            '</strong>',
            ' of ',
            '<strong>',
              '<span ng-bind="paging.total"></span>',
            '</strong>',
          '</span>',
          '<button type="button" class="btn btn-default" ss-pagination-step callback="nextCallback()" ',
          'ng-disabled="paging.next === undefined">',
            '<i class="ion-chevron-right"></i>',
        '</button>',
      '</div>'
      ];

      return template.join('');
    }
  }

  angular
    .module('app')
    .directive('ssPagination', pagination);
})(angular);

paginationStep.js

+(function(angular, _) {
  function paginationStep() {
    // callback is called when the data is being fetched
    // prePhaseCallback, called before the data is fetched
    // postPhaseCallback, called after the data is fetched
    var scope = {
      callback: '&',
      prePhaseCallback: '&',
      postPhaseCallback: '&'
    };

    return {
      scope: scope,
      restrict: 'EA',
      transclude: true,
      template: getTemplate,
      link: link
      // controller: 'PaginationCtrl'
    };

    /**
     * @name getTemplate
     * @description Simply generates the template string
     * @return {String}
     */
    function getTemplate() {
      return [
        '<div ng-transclude>',
        '</div>'
      ].join('');
    }

    function link(scope, element, attrs) {
      if ( _.isUndefined(scope.callback) ) {
        throw new Error('Callback to call server was not specified!');
      }

      element.on('click', movePage);

      /**
       * [goToNextPage description]
       * @return {[type]} [description]
       */
      function movePage() {
        console.log('gotoPage Called');
        // Call pre-phase callback
        if ( !_.isUndefined(scope.prePhaseCallback) ) {
          scope.prePhaseCallback();
        }

        getData();
      }

      function getData() {
        scope.callback();

        // Call post-phase callback
        if ( !_.isUndefined(scope.postPhaseCallback) ) {
          scope.postPhaseCallback();
        }
      }
    }
  }

  angular
    .module('app')
    .directive('ssPaginationStep', paginationStep);
})(angular, _);

usage.html

<ss-pagination
  paging="residents.paging"
  custom-classes="paging pull-right btn-group btn-group-sm"
  next-callback="callbackX()"
  prev-callback="callbackX()">
</ss-pagination>