dirPagination: allow expressions as pagiantionID

This changes allows you to use expressions in the `pagination-id`
attribute, which in turn enables the use of multiple independent
pagination instances generated by an ng-repeat.
It also simplifies the API by not requiring the pagination id to be
specified as a second parameter in the itemsPerPage filter.

Author: michaelbromley

src/directives/pagination/README.md

@@ -23,6 +23,7 @@ filtering of the collection.
 - [Writing A Custom Pagination-Controls Template](#writing-a-custom-pagination-controls-template)
 - [Special Repeat Start and End Points](#special-repeat-start-and-end-points)
 - [Multiple Pagination Instances on One Page](#multiple-pagination-instances-on-one-page)
+    - [Multiple Instances With ngRepeat](#multiple-instances-with-ngrepeat)
 	- [Demo](#demo-1)
 - [Working With Asynchronous Data](#working-with-asynchronous-data)
 	- [Example Asynchronous Setup](#example-asynchronous-setup)
@@ -204,38 +205,68 @@ repeat a series of elements instead of just one parent element:
 
 ## Multiple Pagination Instances on One Page
 
-Multiple instances of the directives may be included on a single page by specifying a `pagination-id`. This property **must** be specified in **3** places
+Multiple instances of the directives may be included on a single page by specifying a `pagination-id`. This property **must** be specified in **2** places
 for this to work:
 
 1. Specify the `pagination-id` attribute on the `dir-paginate` directive.
-2. Specify the third parameter of the `itemsPerPage` filter.
 3. Specify the `pagination-id` attribute on the `dir-paginations-controls` directive.
 
+**Note:** Prior to version 0.5.0, there was an additional requirement to add the ID as a second parameter of the `itemsPerPage` filter. This is now no longer required, as the
+directive will add this parameter automatically. Old code that *does* explicitly declare the ID in the filter will still work.
+
 An example of two independent paginations on one page would look like this:
 
 ```HTML
 <!-- first pagination instance -->
 <ul>
-    <li dir-paginate="customer in customers | itemsPerPage: 10: 'cust'" pagination-id="cust">{{ customer.name }}</li>
+    <li dir-paginate="customer in customers | itemsPerPage: 10" pagination-id="cust">{{ customer.name }}</li>
 </ul>
 
 <dir-pagination-controls pagination-id="cust"></dir-pagination-controls>
 
 <!-- second pagination instance -->
 <ul>
-    <li dir-paginate="branch in branches | itemsPerPage: 10: 'branch'" pagination-id="branch">{{ customer.name }}</li>
+    <li dir-paginate="branch in branches | itemsPerPage: 10" pagination-id="branch">{{ customer.name }}</li>
 </ul>
 
 <dir-pagination-controls pagination-id="branch"></dir-pagination-controls>
 ```
 
 The pagination-ids above are set to "cust" in the first instance and "branch" in the second. The pagination-ids can be anything you like,
-the important thing is to make sure the exact same id is used in all 3 places. If the 3 ids don't match, you should see a helpful
+the important thing is to make sure the exact same id is used on both the pagination and the controls directives. If the 2 ids don't match, you should see a helpful
 exception in the console.
 
+### Multiple Instances With ngRepeat
+
+You can use the pagination-id feature to dynamically create pagination instances, for example inside an `ng-repeat` block. Here is a bare-bones example to
+demonstrate how that would work:
+
+```JavaScript
+// in the controller
+$scope.lists = [
+    {
+        id: 'list1',
+        collection: [1, 2, 3, 4, 5]
+    },
+    {
+        id: 'list2',
+        collection: ['a', 'b', 'c', 'd', 'e']
+    }];
+```
+
+```HTML
+<!-- the view -->
+<div ng-repeat="list in lists">
+    <ul>
+        <li dir-paginate="item in list.collection | itemsPerPage: 3" pagination-id="list.id">ID: {{ list.id }}, item: {{ item }}</li>
+    </ul>
+    <dir-pagination-controls pagination-id="list.id"></dir-pagination-controls>
+</div>
+```
+
 ### Demo
 
-Here is a working demo featuring two instances on one page: [http://plnkr.co/edit/Pm4L53UYAieF808v8wxL?p=preview](http://plnkr.co/edit/Pm4L53UYAieF808v8wxL?p=preview)
+Here is a working demo featuring two instances on one page: [http://plnkr.co/edit/xmjmIId0c9Glh5QH97xz?p=preview](http://plnkr.co/edit/xmjmIId0c9Glh5QH97xz?p=preview)
 
 
 ## Working With Asynchronous Data

src/directives/pagination/dirPagination.js

@@ -20,6 +20,7 @@
      * Config
      */
     var moduleName = 'angularUtils.directives.dirPagination';
+    var DEFAULT_ID = '__default';
 
     /**
      * Module
@@ -40,15 +41,6 @@
             priority: 5000, // This setting is used in conjunction with the later call to $compile() to prevent infinite recursion of compilation
             compile: function dirPaginationCompileFn(tElement, tAttrs){
 
-                // Add ng-repeat to the dom element
-                if (tElement[0].hasAttribute('dir-paginate-start') || tElement[0].hasAttribute('data-dir-paginate-start')) {
-                    // using multiElement mode (dir-paginate-start, dir-paginate-end)
-                    tAttrs.$set('ngRepeatStart', tAttrs.dirPaginate);
-                    tElement.eq(tElement.length - 1).attr('ng-repeat-end', true);
-                } else {
-                    tAttrs.$set('ngRepeat', tAttrs.dirPaginate);
-                }
-
                 var expression = tAttrs.dirPaginate;
                 // regex taken directly from https://github.com/angular/angular.js/blob/master/src/ng/directive/ngRepeat.js#L211
                 var match = expression.match(/^\s*([\s\S]+?)\s+in\s+([\s\S]+?)(?:\s+track\s+by\s+([\s\S]+?))?\s*$/);
@@ -60,10 +52,35 @@
                 var itemsPerPageFilterRemoved = match[2].replace(filterPattern, '');
                 var collectionGetter = $parse(itemsPerPageFilterRemoved);
 
-                var paginationId = tAttrs.paginationId || '__default';
-                paginationService.registerInstance(paginationId);
+                // If any value is specified for paginationId, we register the un-evaluated expression at this stage for the benefit of any
+                // dir-pagination-controls directives that may be looking for this ID.
+                var rawId = tAttrs.paginationId || DEFAULT_ID;
+                paginationService.registerInstance(rawId);
 
                 return function dirPaginationLinkFn(scope, element, attrs){
+
+                    // Now that we have access to the `scope` we can interpolate any expression given in the paginationId attribute and
+                    // potentially register a new ID if it evaluates to a different value than the rawId.
+                    var paginationId = $parse(attrs.paginationId)(scope) || attrs.paginationId || DEFAULT_ID;
+                    paginationService.registerInstance(paginationId);
+
+                    var repeatExpression;
+                    var idDefinedInFilter = !!expression.match(/(\|\s*itemsPerPage\s*:[^|]*:[^|]*)/);
+                    if (paginationId !== DEFAULT_ID && !idDefinedInFilter) {
+                        repeatExpression = expression.replace(/(\|\s*itemsPerPage\s*:[^|]*)/, "$1 : '" + paginationId + "'");
+                    } else {
+                        repeatExpression = expression;
+                    }
+
+                    // Add ng-repeat to the dom element
+                    if (element[0].hasAttribute('dir-paginate-start') || element[0].hasAttribute('data-dir-paginate-start')) {
+                        // using multiElement mode (dir-paginate-start, dir-paginate-end)
+                        attrs.$set('ngRepeatStart', repeatExpression);
+                        element.eq(element.length - 1).attr('ng-repeat-end', true);
+                    } else {
+                        attrs.$set('ngRepeat', repeatExpression);
+                    }
+
                     var compiled =  $compile(element, false, 5000); // we manually compile the element again, as we have now added ng-repeat. Priority less than 5000 prevents infinite recursion of compiling dirPaginate
 
                     var currentPageGetter;
@@ -183,21 +200,26 @@
             },
             scope: {
                 maxSize: '=?',
-                onPageChange: '&?'
+                onPageChange: '&?',
+                paginationId: '=?'
             },
-            link: function(scope, element, attrs) {
+            link: function dirPaginationControlsLinkFn(scope, element, attrs) {
 
-                var paginationId;
-                paginationId = attrs.paginationId || '__default';
-                if (!scope.maxSize) { scope.maxSize = 9; }
-                scope.directionLinks = angular.isDefined(attrs.directionLinks) ? scope.$parent.$eval(attrs.directionLinks) : true;
-                scope.boundaryLinks = angular.isDefined(attrs.boundaryLinks) ? scope.$parent.$eval(attrs.boundaryLinks) : false;
+                // rawId is the un-interpolated value of the pagination-id attribute. This is only important when the corresponding dir-paginate directive has
+                // not yet been linked (e.g. if it is inside an ng-if block), and in that case it prevents this controls directive from assuming that there is
+                // no corresponding dir-paginate directive and wrongly throwing an exception.
+                var rawId = attrs.paginationId ||  DEFAULT_ID;
+                var paginationId = scope.paginationId || attrs.paginationId ||  DEFAULT_ID;
 
-                if (!paginationService.isRegistered(paginationId)) {
-                    var idMessage = (paginationId !== '__default') ? ' (id: ' + paginationId + ') ' : ' ';
+                if (!paginationService.isRegistered(paginationId) && !paginationService.isRegistered(rawId)) {
+                    var idMessage = (paginationId !== DEFAULT_ID) ? ' (id: ' + paginationId + ') ' : ' ';
                     throw 'pagination directive: the pagination controls' + idMessage + 'cannot be used without the corresponding pagination directive.';
                 }
 
+                if (!scope.maxSize) { scope.maxSize = 9; }
+                scope.directionLinks = angular.isDefined(attrs.directionLinks) ? scope.$parent.$eval(attrs.directionLinks) : true;
+                scope.boundaryLinks = angular.isDefined(attrs.boundaryLinks) ? scope.$parent.$eval(attrs.boundaryLinks) : false;
+
                 var paginationRange = Math.max(scope.maxSize, 5);
                 scope.pages = [];
                 scope.pagination = {
@@ -291,7 +313,7 @@
 
         return function(collection, itemsPerPage, paginationId) {
             if (typeof (paginationId) === 'undefined') {
-                paginationId = '__default';
+                paginationId = DEFAULT_ID;
             }
             if (!paginationService.isRegistered(paginationId)) {
                 throw 'pagination directive: the itemsPerPage id argument (id: ' + paginationId + ') does not match a registered pagination-id.';

src/directives/pagination/dirPagination.spec.js

@@ -722,4 +722,63 @@ describe('dirPagination directive', function() {
             expect(containingElement.find('p').length).toEqual(3);
         });
     });
+
+    /**
+     * THis suite tests out the ability to handle dynamically-generated pagination ids. The main use case is when
+     * there are multiple dir-pagination instances being generated by an ng-repeat, and the pagination id is
+     * only known at run-time.
+     */
+    describe('dynamic pagination ids', function() {
+        function compile() {
+            var html = '<div ng-repeat="list in lists"><ul class="list">' +
+                '<li dir-paginate="item in list.collection | itemsPerPage: 3" pagination-id="list.id">{{ item }}</li>' +
+                '</ul>' +
+                '<dir-pagination-controls pagination-id="list.id"></dir-pagination-controls>' +
+                '</div>';
+
+            $scope.lists = [
+                {
+                    id: 'list1',
+                    collection: [1, 2, 3, 4, 5]
+                },
+                {
+                    id: 'list2',
+                    collection: ['a', 'b', 'c', 'd', 'e']
+                }
+            ];
+            containingElement.append($compile(html)($scope));
+            $scope.$apply();
+        }
+
+        function getListItems($list) {
+            return $list.find('li').map(function() {
+                return $(this).text().trim();
+            }).get();
+        }
+
+        it('should not throw an exception', function() {
+            expect(compile).not.toThrow();
+        });
+
+        it('should allow independent pagination', function() {
+            compile();
+
+            var $list1 = containingElement.find('ul.list').eq(0);
+            var $list2 = containingElement.find('ul.list').eq(1);
+
+            expect(getListItems($list1)).toEqual([ '1', '2', '3' ]);
+            expect(getListItems($list2)).toEqual([ 'a', 'b', 'c' ]);
+
+            // click the "page 2" link on the first set of pagination
+            var pagination1 = $list1.parent().find('ul.pagination');
+            pagination1.children().eq(2).find('a').triggerHandler('click');
+            $scope.$apply();
+
+            // ensure only the first set of pagination changes
+            expect(getListItems($list1)).toEqual([ '4', '5' ]);
+            expect(getListItems($list2)).toEqual([ 'a', 'b', 'c' ]);
+        });
+
+
+    });
 });