feat(pagination): add templateUrl support

- Add support for overriding the `templateUrl` on an instance by instance basis
- Expose controller via `controllerAs`

Closes #4162

src/pagination/docs/readme.md

@@ -81,3 +81,7 @@ For `ng-model`, `total-items`, `items-per-page` and `num-pages` see pagination s
  * `next-text`
  	_(Default: 'Next »')_ :
  	Text for Next button.
+
+ * `template-url`
+  _(Default: 'template/pagination/pager.html') :
+  Override the template for the component with a custom provided template

src/pagination/pagination.js

@@ -209,7 +209,10 @@ angular.module('ui.bootstrap.pagination', [])
     },
     require: ['pager', '?ngModel'],
     controller: 'PaginationController',
-    templateUrl: 'template/pagination/pager.html',
+    controllerAs: 'pagination',
+    templateUrl: function(element, attrs) {
+      return attrs.templateUrl || 'template/pagination/pager.html';
+    },
     replace: true,
     link: function(scope, element, attrs, ctrls) {
       var paginationCtrl = ctrls[0], ngModelCtrl = ctrls[1];

src/pagination/test/pager.spec.js

@@ -1,13 +1,14 @@
 describe('pager directive', function () {
-  var $compile, $rootScope, $document, element;
+  var $compile, $rootScope, $document, $templateCache, element;
   beforeEach(module('ui.bootstrap.pagination'));
   beforeEach(module('template/pagination/pager.html'));
-  beforeEach(inject(function(_$compile_, _$rootScope_, _$document_) {
+  beforeEach(inject(function(_$compile_, _$rootScope_, _$document_, _$templateCache_) {
     $compile = _$compile_;
     $rootScope = _$rootScope_;
     $rootScope.total = 47; // 5 pages
     $rootScope.currentPage = 3;
     $document = _$document_;
+    $templateCache = _$templateCache_;
     element = $compile('<pager total-items="total" ng-model="currentPage"></pager>')($rootScope);
     $rootScope.$digest();
   }));
@@ -23,7 +24,7 @@ describe('pager directive', function () {
   function clickPaginationEl(index) {
     getPaginationEl(index).find('a').click();
   }
-  
+
   function getPaginationLinkEl(elem, index) {
     return elem.find('li').eq(index).find('a');
   }
@@ -51,6 +52,21 @@ describe('pager directive', function () {
     expect(getPaginationEl(-1)).toHaveClass('next');
   });
 
+  it('exposes the controller on the template', function() {
+    $templateCache.put('template/pagination/pager.html', '<div>{{pagination.text}}</div>');
+
+    element = $compile('<pager></pager>')($rootScope);
+    $rootScope.$digest();
+
+    var ctrl = element.controller('pager');
+    expect(ctrl).toBeDefined();
+
+    ctrl.text = 'foo';
+    $rootScope.$digest();
+
+    expect(element.html()).toBe('foo');
+  });
+
   it('disables the "previous" link if current page is 1', function() {
     updateCurrentPage(1);
     expect(getPaginationEl(0)).toHaveClass('disabled');
@@ -104,13 +120,13 @@ describe('pager directive', function () {
   it('should blur the "next" link after it has been clicked', function () {
     $document.find('body').append(element);
     var linkEl = getPaginationLinkEl(element, -1);
-    
+
     linkEl.focus();
     expect(linkEl).toHaveFocus();
-    
+
     linkEl.click();
     expect(linkEl).not.toHaveFocus();
-    
+
     element.remove();
   });
 
@@ -126,7 +142,16 @@ describe('pager directive', function () {
 
     element.remove();
   });
-
+
+  it('allows custom templates', function() {
+    $templateCache.put('foo/bar.html', '<div>baz</div>');
+
+    element = $compile('<pager template-url="foo/bar.html"></pager>')($rootScope);
+    $rootScope.$digest();
+
+    expect(element.html()).toBe('baz');
+  });
+
   describe('`items-per-page`', function () {
     beforeEach(function() {
       $rootScope.perpage = 5;