feat(pagination): plug into ngModel controller

Closes #1545

BREAKING CHANGE: Both `pagination` and `pager` are now integrated with `ngModelController`.
 * `page` is replaced from `ng-model`.
 * `on-select-page` is removed since `ng-change` can now be used.

  Before:

  <pagination page="current" on-select-page="changed(page)" ...></pagination>

  After:

  <pagination ng-model="current" ng-change="changed()" ...></pagination>

Author: bekos

src/pagination/docs/demo.html

@@ -1,19 +1,19 @@
 <div ng-controller="PaginationDemoCtrl">
     <h4>Default</h4>
-    <pagination total-items="totalItems" page="currentPage"></pagination>
-    <pagination boundary-links="true" total-items="totalItems" page="currentPage" class="pagination-sm" previous-text="&lsaquo;" next-text="&rsaquo;" first-text="&laquo;" last-text="&raquo;"></pagination>
-    <pagination direction-links="false" boundary-links="true" total-items="totalItems" page="currentPage"></pagination>
-    <pagination direction-links="false" total-items="totalItems" page="currentPage" num-pages="smallnumPages"></pagination>
+    <pagination total-items="totalItems" ng-model="currentPage" ng-change="pageChanged()"></pagination>
+    <pagination boundary-links="true" total-items="totalItems" ng-model="currentPage" class="pagination-sm" previous-text="&lsaquo;" next-text="&rsaquo;" first-text="&laquo;" last-text="&raquo;"></pagination>
+    <pagination direction-links="false" boundary-links="true" total-items="totalItems" ng-model="currentPage"></pagination>
+    <pagination direction-links="false" total-items="totalItems" ng-model="currentPage" num-pages="smallnumPages"></pagination>
     <pre>The selected page no: {{currentPage}}</pre>
     <button class="btn btn-info" ng-click="setPage(3)">Set current page to: 3</button>
 
     <hr />
     <h4>Pager</h4>
-    <pager total-items="totalItems" page="currentPage"></pager>
+    <pager total-items="totalItems" ng-model="currentPage"></pager>
 
     <hr />
     <h4>Limit the maximum visible buttons</h4>
-    <pagination total-items="bigTotalItems" page="bigCurrentPage" max-size="maxSize" class="pagination-sm" boundary-links="true"></pagination>
-    <pagination total-items="bigTotalItems" page="bigCurrentPage" max-size="maxSize" class="pagination-sm" boundary-links="true" rotate="false" num-pages="numPages"></pagination>
+    <pagination total-items="bigTotalItems" ng-model="bigCurrentPage" max-size="maxSize" class="pagination-sm" boundary-links="true"></pagination>
+    <pagination total-items="bigTotalItems" ng-model="bigCurrentPage" max-size="maxSize" class="pagination-sm" boundary-links="true" rotate="false" num-pages="numPages"></pagination>
     <pre>Page: {{bigCurrentPage}} / {{numPages}}</pre>
 </div>

src/pagination/docs/demo.js

@@ -1,12 +1,16 @@
 var PaginationDemoCtrl = function ($scope) {
   $scope.totalItems = 64;
   $scope.currentPage = 4;
-  $scope.maxSize = 5;
-  
+
   $scope.setPage = function (pageNo) {
     $scope.currentPage = pageNo;
   };
 
+  $scope.pageChanged = function() {
+    console.log('Page changed to: ' + $scope.currentPage);
+  };
+
+  $scope.maxSize = 5;
   $scope.bigTotalItems = 175;
   $scope.bigCurrentPage = 1;
 };

src/pagination/docs/readme.md

@@ -5,7 +5,7 @@ A lightweight pagination directive that is focused on ... providing pagination &
 
 Settings can be provided as attributes in the `<pagination>` or globally configured through the `paginationConfig`.
 
- * `page` <i class="glyphicon glyphicon-eye-open"></i>
+ * `ng-model` <i class="glyphicon glyphicon-eye-open"></i>
  	:
  	Current page number. First page is 1.
 
@@ -29,10 +29,6 @@ Settings can be provided as attributes in the `<pagination>` or globally configu
  	_(Defaults: true)_ :
  	Whether to keep current page in the middle of the visible ones.
 
- * `on-select-page (page)`
- 	_(Default: null)_ :
- 	An optional expression called when a page is selected having the page number as argument.
-
  * `direction-links`
  	_(Default: true)_ :
  	Whether to display Previous / Next buttons.
@@ -60,7 +56,7 @@ Settings can be provided as attributes in the `<pagination>` or globally configu
 ### Pager Settings ###
 
 Settings can be provided as attributes in the `<pager>` or globally configured through the `pagerConfig`.  
-For `page`, `total-items`, `items-per-page`, `num-pages` and `on-select-page (page)` see pagination settings. Other settings are:
+For `ng-model`, `total-items`, `items-per-page` and `num-pages` see pagination settings. Other settings are:
 
  * `align`
  	_(Default: true)_ :

src/pagination/pagination.js

@@ -2,9 +2,16 @@ angular.module('ui.bootstrap.pagination', [])
 
 .controller('PaginationController', ['$scope', '$attrs', '$parse', '$interpolate', function ($scope, $attrs, $parse, $interpolate) {
   var self = this,
+      ngModelCtrl = { $setViewValue: angular.noop }, // nullModelCtrl
       setNumPages = $attrs.numPages ? $parse($attrs.numPages).assign : angular.noop;
 
-  this.init = function(defaultItemsPerPage) {
+  this.init = function(ngModelCtrl_, defaultItemsPerPage) {
+    ngModelCtrl = ngModelCtrl_;
+
+    ngModelCtrl.$render = function() {
+      self.render();
+    };
+
     if ($attrs.itemsPerPage) {
       $scope.$parent.$watch($parse($attrs.itemsPerPage), function(value) {
         self.itemsPerPage = parseInt(value, 10);
@@ -36,16 +43,16 @@ angular.module('ui.bootstrap.pagination', [])
   };
 
   this.render = function() {
-    this.page = parseInt($scope.page, 10) || 1;
+    this.page = parseInt(ngModelCtrl.$viewValue, 10) || 1;
     if (this.page > 0 && this.page <= $scope.totalPages) {
       $scope.pages = this.getPages(this.page, $scope.totalPages);
     }
   };
 
   $scope.selectPage = function(page) {
     if ( ! self.isActive(page) && page > 0 && page <= $scope.totalPages) {
-      $scope.page = page;
-      $scope.onSelectPage({ page: page });
+      ngModelCtrl.$setViewValue(page);
+      ngModelCtrl.$render();
     }
   };
 
@@ -63,7 +70,7 @@ angular.module('ui.bootstrap.pagination', [])
     if ( self.page > value ) {
       $scope.selectPage(value);
     } else {
-      self.render();
+      ngModelCtrl.$render();
     }
   });
 }])
@@ -83,14 +90,18 @@ angular.module('ui.bootstrap.pagination', [])
   return {
     restrict: 'EA',
     scope: {
-      page: '=',
-      totalItems: '=',
-      onSelectPage:' &'
+      totalItems: '='
     },
+    require: ['pagination', '?ngModel'],
     controller: 'PaginationController',
     templateUrl: 'template/pagination/pagination.html',
     replace: true,
-    link: function(scope, element, attrs, paginationCtrl) {
+    link: function(scope, element, attrs, ctrls) {
+      var paginationCtrl = ctrls[0], ngModel = ctrls[1];
+
+      if (!ngModel) {
+         return; // do nothing if no ng-model
+      }
 
       // Setup configuration parameters
       var maxSize,
@@ -102,7 +113,7 @@ angular.module('ui.bootstrap.pagination', [])
       lastText       = paginationCtrl.getAttributeValue(attrs.lastText,       config.lastText,      true),
       rotate         = paginationCtrl.getAttributeValue(attrs.rotate,         config.rotate);
 
-      paginationCtrl.init(config.itemsPerPage);
+      paginationCtrl.init(ngModel, config.itemsPerPage);
 
       if (attrs.maxSize) {
         scope.$parent.$watch($parse(attrs.maxSize), function(value) {
@@ -203,21 +214,25 @@ angular.module('ui.bootstrap.pagination', [])
   return {
     restrict: 'EA',
     scope: {
-      page: '=',
-      totalItems: '=',
-      onSelectPage:' &'
+      totalItems: '='
     },
+    require: ['pager', '?ngModel'],
     controller: 'PaginationController',
     templateUrl: 'template/pagination/pager.html',
     replace: true,
-    link: function(scope, element, attrs, paginationCtrl) {
+    link: function(scope, element, attrs, ctrls) {
+      var paginationCtrl = ctrls[0], ngModel = ctrls[1];
+
+      if (!ngModel) {
+         return; // do nothing if no ng-model
+      }
 
       // Setup configuration parameters
       var previousText = paginationCtrl.getAttributeValue(attrs.previousText, config.previousText, true),
       nextText         = paginationCtrl.getAttributeValue(attrs.nextText,     config.nextText,     true),
       align            = paginationCtrl.getAttributeValue(attrs.align,        config.align);
 
-      paginationCtrl.init(config.itemsPerPage);
+      paginationCtrl.init(ngModel, config.itemsPerPage);
 
       // Create page object used in template
       function makePage(number, text, isDisabled, isPrevious, isNext) {

src/pagination/test/pager.spec.js

@@ -7,7 +7,7 @@ describe('pager directive', function () {
     $rootScope = _$rootScope_;
     $rootScope.total = 47; // 5 pages
     $rootScope.currentPage = 3;
-    element = $compile('<pager total-items="total" page="currentPage"></pager>')($rootScope);
+    element = $compile('<pager total-items="total" ng-model="currentPage"></pager>')($rootScope);
     $rootScope.$digest();
   }));
 
@@ -78,13 +78,13 @@ describe('pager directive', function () {
     expect($rootScope.currentPage).toBe(5);
   });
 
-  it('executes the `on-select-page` expression when an element is clicked', function() {
+  it('executes the `ng-change` expression when an element is clicked', function() {
     $rootScope.selectPageHandler = jasmine.createSpy('selectPageHandler');
-    element = $compile('<pager total-items="total" page="currentPage" on-select-page="selectPageHandler(page)"></pager>')($rootScope);
+    element = $compile('<pager total-items="total" ng-model="currentPage" ng-change="selectPageHandler()"></pager>')($rootScope);
     $rootScope.$digest();
 
     clickPaginationEl(-1);
-    expect($rootScope.selectPageHandler).toHaveBeenCalledWith(4);
+    expect($rootScope.selectPageHandler).toHaveBeenCalled();
   });
 
   it('does not changes the number of pages when `total-items` changes', function() {
@@ -99,7 +99,7 @@ describe('pager directive', function () {
   describe('`items-per-page`', function () {
     beforeEach(inject(function() {
       $rootScope.perpage = 5;
-      element = $compile('<pager total-items="total" items-per-page="perpage" page="currentPage"></pagination>')($rootScope);
+      element = $compile('<pager total-items="total" items-per-page="perpage" ng-model="currentPage"></pagination>')($rootScope);
       $rootScope.$digest();
     }));
 
@@ -133,7 +133,7 @@ describe('pager directive', function () {
   describe('`num-pages`', function () {
     beforeEach(inject(function() {
       $rootScope.numpg = null;
-      element = $compile('<pager total-items="total" page="currentPage" num-pages="numpg"></pager>')($rootScope);
+      element = $compile('<pager total-items="total" ng-model="currentPage" num-pages="numpg"></pager>')($rootScope);
       $rootScope.$digest();
     }));
 
@@ -149,7 +149,7 @@ describe('pager directive', function () {
       pagerConfig.previousText = 'PR';
       pagerConfig.nextText = 'NE';
       pagerConfig.align = false;
-      element = $compile('<pager total-items="total" page="currentPage"></pager>')($rootScope);
+      element = $compile('<pager total-items="total" ng-model="currentPage"></pager>')($rootScope);
       $rootScope.$digest();
     }));
     afterEach(inject(function(pagerConfig) {
@@ -170,7 +170,7 @@ describe('pager directive', function () {
 
   describe('override configuration from attributes', function () {
     beforeEach(inject(function() {
-      element = $compile('<pager align="false" previous-text="<" next-text=">" total-items="total" page="currentPage"></pager>')($rootScope);
+      element = $compile('<pager align="false" previous-text="<" next-text=">" total-items="total" ng-model="currentPage"></pager>')($rootScope);
       $rootScope.$digest();
     }));
 
@@ -191,7 +191,7 @@ describe('pager directive', function () {
     it('changes "previous" & "next" text from interpolated attributes', function() {
       $rootScope.previousText = '<<';
       $rootScope.nextText = '>>';
-      element = $compile('<pager align="false" previous-text="{{previousText}}" next-text="{{nextText}}" total-items="total" page="currentPage"></pager>')($rootScope);
+      element = $compile('<pager align="false" previous-text="{{previousText}}" next-text="{{nextText}}" total-items="total" ng-model="currentPage"></pager>')($rootScope);
       $rootScope.$digest();
 
       expect(getPaginationEl(0).text()).toBe('<<');