Add support for template strings.

Closes michaelbromley#88

Author: michaelbromley

src/directives/pagination/README.md

@@ -110,22 +110,43 @@ expects pagination lists to have a particular structure different from the defau
 If you plan to use a custom template, take a look at the default as demonstrated in dirPagination.tpl.html to get
 an idea of how it interacts with the directive.
 
-There are two ways to specify the template of the pagination controls directive:
+There are three ways to specify the template of the pagination controls directive:
 
-**1. Use the `paginationTemplateProvider` in your app's config block to set a global template for your app:**
+**1. Use the `paginationTemplateProvider` in your app's config block to set a global templateUrl for your app:**
 
 ```JavaScript
 myApp.config(function(paginationTemplateProvider) {
     paginationTemplateProvider.setPath('path/to/dirPagination.tpl.html');
 });
 ```
 
-**2. Use the `template-url` attribute on each pagination controls directive:**
+**2. Use the `paginationTemplateProvider` in your app's config block to set a global template string for your app:**
+
+```JavaScript
+myApp.config(function(paginationTemplateProvider) {
+    paginationTemplateProvider.setString('<div class="my-page-links">...</div>');
+    
+    // or with e.g. Webpack you might do
+    paginationTemplateProvider.setString(require('/path/to/customPagination.tpl.html'));
+});
+```
+
+**3. Use the `template-url` attribute on each pagination controls directive:**
 
 ```HTML
 <dir-pagination-controls template-url="path/to/dirPagination.tpl.html"></dir-pagination-controls>
 ```
 
+#### Template Priority
+
+If you use more than one method for specifying the template, the actual template to use will be decided based on
+the following order of precedence (highest priority first):
+
+1. `paginationTemplate.getString()`
+2. `template-url`
+3. `paginationTemplate.getPath()`
+4. (default built-in template)
+
 ## Directives API
 
 The following attributes form the API for the pagination and pagination-controls directives. Optional attributes are marked as such,

src/directives/pagination/dirPagination.js

@@ -224,11 +224,8 @@
 
         var numberRegex = /^\d+$/;
 
-        return {
+        var DDO = {
             restrict: 'AE',
-            templateUrl: function(elem, attrs) {
-                return attrs.templateUrl || paginationTemplate.getPath();
-            },
             scope: {
                 maxSize: '=?',
                 onPageChange: '&?',
@@ -238,6 +235,23 @@
             link: dirPaginationControlsLinkFn
         };
 
+        // We need to check the paginationTemplate service to see whether a template path or
+        // string has been specified, and add the `template` or `templateUrl` property to
+        // the DDO as appropriate. The order of priority to decide which template to use is
+        // (highest priority first):
+        // 1. paginationTemplate.getString()
+        // 2. attrs.templateUrl
+        // 3. paginationTemplate.getPath()
+        var templateString = paginationTemplate.getString();
+        if (templateString !== undefined) {
+            DDO.template = templateString;
+        } else {
+            DDO.templateUrl = function(elem, attrs) {
+                return attrs.templateUrl || paginationTemplate.getPath();
+            };
+        }
+        return DDO;
+
         function dirPaginationControlsLinkFn(scope, element, attrs) {
 
             // rawId is the un-interpolated value of the pagination-id attribute. This is only important when the corresponding dir-paginate directive has
@@ -586,15 +600,33 @@
     function paginationTemplateProvider() {
 
         var templatePath = 'angularUtils.directives.dirPagination.template';
+        var templateString;
 
+        /**
+         * Set a templateUrl to be used by all instances of <dir-pagination-controls>
+         * @param {String} path
+         */
         this.setPath = function(path) {
             templatePath = path;
         };
 
+        /**
+         * Set a string of HTML to be used as a template by all instances
+         * of <dir-pagination-controls>. If both a path *and* a string have been set,
+         * the string takes precedence.
+         * @param {String} str
+         */
+        this.setString = function(str) {
+            templateString = str;
+        };
+
         this.$get = function() {
             return {
                 getPath: function() {
                     return templatePath;
+                },
+                getString: function() {
+                    return templateString;
                 }
             };
         };

src/directives/pagination/dirPagination.spec.js

@@ -14,6 +14,13 @@ describe('dirPagination directive', function() {
     beforeEach(module('angularUtils.directives.dirPagination'));
     beforeEach(module('templates-main'));
 
+    // used to test the paginationTemplateProvider (see end of file)
+    var templateProvider;
+    angular.module('customTemplateTestApp', []);
+    beforeEach(module('customTemplateTestApp', function(paginationTemplateProvider) {
+        templateProvider = paginationTemplateProvider;
+    }));
+
     beforeEach(inject(function($rootScope, _$compile_, _$timeout_) {
 
         $compile = _$compile_;
@@ -1141,6 +1148,52 @@ describe('dirPagination directive', function() {
             expect(getListItems($list2)).toEqual([ 'a', 'b', 'c' ]);
         });
 
+    });
+
+    describe('paginationTemplateProvider', function() {
+
+        beforeEach(inject(function($templateCache) {
+            $templateCache.put('setPath_template', '<div class="set-path-template"><span>Test Template</span>{{ pages.length }}</div>');
+            $templateCache.put('templateUrl_template', '<div class="template-url-template"><span>Test TemplateUrl Template</span>{{ pages.length }}</div>');
+        }));
+
+        it('should use the custom template specified by setPath()', function() {
+            templateProvider.setPath('setPath_template');
+            compileElement(myCollection, 10);
+
+            expect(containingElement.find('.set-path-template').html()).toContain('Test Template');
+        });
+
+        it('should use the custom template specified by setString()', function() {
+            templateProvider.setString('<div class="set-string-template"><span>Test Template String</span>{{ pages.length }}</div>');
+            compileElement(myCollection, 10);
+
+            expect(containingElement.find('.set-string-template').html()).toContain('Test Template String');
+        });
+
+        it('should prioritize setString() if both path and string have been set', function() {
+            templateProvider.setString('<div class="set-string-template"><span>Test Template String</span>{{ pages.length }}</div>');
+            templateProvider.setPath('setPath_template');
+            compileElement(myCollection, 10);
+
+            expect(containingElement.find('.set-path-template').html()).toBeUndefined();
+            expect(containingElement.find('.set-string-template').html()).toContain('Test Template String');
+        });
+
+        it('should prioritize setString() over path and template-url attribute.', function() {
+            templateProvider.setString('<div class="set-string-template"><span>Test Template String</span>{{ pages.length }}</div>');
+            templateProvider.setPath('setPath_template');
+
+            var html = '<ul class="list"><li dir-paginate="item in collection | itemsPerPage: itemsPerPage" current-page="currentPage">{{ item }}</li></ul> ' +
+                '<dir-pagination-controls template-url="templateUrl_template"></dir-pagination-controls>';
+            containingElement.append($compile(html)($scope));
+            $scope.$apply();
+
+            expect(containingElement.find('.set-path-template').html()).toBeUndefined();
+            expect(containingElement.find('.template-url-template').html()).toBeUndefined();
+            expect(containingElement.find('.set-string-template').html()).toContain('Test Template String');
+        });
 
     });
+
 });