From 639d5117b7cb0a81c4b946cadea6555e62744bcc Mon Sep 17 00:00:00 2001
From: Adam Gordon <adam@gordonizer.com>
Date: Wed, 26 Aug 2015 23:34:30 -0600
Subject: [PATCH] feat(timepicker): add `templateUrl` and `controllerAs`
 support

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

Fixes #4275
Closes #4284
---
 src/timepicker/docs/readme.md          |  3 +++
 src/timepicker/test/timepicker.spec.js | 31 ++++++++++++++++++++++++--
 src/timepicker/timepicker.js           |  5 ++++-
 3 files changed, 36 insertions(+), 3 deletions(-)

diff --git a/src/timepicker/docs/readme.md b/src/timepicker/docs/readme.md
index 41358a0538..b9b418c8d3 100644
--- a/src/timepicker/docs/readme.md
+++ b/src/timepicker/docs/readme.md
@@ -8,6 +8,9 @@ All settings can be provided as attributes in the `<timepicker>` or globally con
  	:
  	The Date object that provides the time state.
 
+  * `template-url` (Defaults: `template/timepicker/timepicker.html`) :
+    Add the ability to override the template used on the component.
+
  * `hour-step` <i class="glyphicon glyphicon-eye-open"></i>
  	_(Defaults: 1)_ :
  	 Number of hours to increase or decrease when using a button.
diff --git a/src/timepicker/test/timepicker.spec.js b/src/timepicker/test/timepicker.spec.js
index b8033d2f18..42afa395dc 100644
--- a/src/timepicker/test/timepicker.spec.js
+++ b/src/timepicker/test/timepicker.spec.js
@@ -1,12 +1,13 @@
 describe('timepicker directive', function() {
-  var $rootScope, $compile, element;
+  var $rootScope, $compile, $templateCache, element;
 
   beforeEach(module('ui.bootstrap.timepicker'));
   beforeEach(module('template/timepicker/timepicker.html'));
-  beforeEach(inject(function(_$compile_, _$rootScope_) {
+  beforeEach(inject(function(_$compile_, _$rootScope_, _$templateCache_) {
     $compile = _$compile_;
     $rootScope = _$rootScope_;
     $rootScope.time = newTime(14, 40);
+    $templateCache = _$templateCache_;
 
     element = $compile('<timepicker ng-model="time"></timepicker>')($rootScope);
     $rootScope.$digest();
@@ -1692,4 +1693,30 @@ describe('timepicker directive', function() {
       expect(element.hasClass('ng-invalid-time')).toBe(false);
     });
   });
+
+  describe('custom template and controllerAs', function() {
+    it('should allow custom templates', function() {
+      $templateCache.put('foo/bar.html', '<div>baz</div>');
+
+      element = $compile('<timepicker ng-model="time" template-url="foo/bar.html"></timepicker>')($rootScope);
+      $rootScope.$digest();
+      expect(element[0].tagName.toLowerCase()).toBe('div');
+      expect(element.html()).toBe('baz');
+    });
+
+    it('should expose the controller on the view', function() {
+      $templateCache.put('template/timepicker/timepicker.html', '<div><div>{{timepicker.text}}</div></div>');
+
+      element = $compile('<timepicker ng-model="time"></timepicker>')($rootScope);
+      $rootScope.$digest();
+
+      var ctrl = element.controller('timepicker');
+      expect(ctrl).toBeDefined();
+
+      ctrl.text = 'foo';
+      $rootScope.$digest();
+
+      expect(element.html()).toBe('<div class="ng-binding">foo</div>');
+    });
+  });
 });
diff --git a/src/timepicker/timepicker.js b/src/timepicker/timepicker.js
index 01502258a7..42def45fcd 100644
--- a/src/timepicker/timepicker.js
+++ b/src/timepicker/timepicker.js
@@ -364,9 +364,12 @@ angular.module('ui.bootstrap.timepicker', [])
     restrict: 'EA',
     require: ['timepicker', '?^ngModel'],
     controller:'TimepickerController',
+    controllerAs: 'timepicker',
     replace: true,
     scope: {},
-    templateUrl: 'template/timepicker/timepicker.html',
+    templateUrl: function(element, attrs) {
+      return attrs.templateUrl || 'template/timepicker/timepicker.html';
+    },
     link: function(scope, element, attrs, ctrls) {
       var timepickerCtrl = ctrls[0], ngModelCtrl = ctrls[1];