feat(carousel): add templateUrl support

- Add support for `templateUrl` attribute for `carousel` and `slide`
  directives for instance by instance overriding of default templates

Closes #4141

Author: wesleycho

src/carousel/carousel.js

@@ -251,7 +251,9 @@ angular.module('ui.bootstrap.carousel', [])
     controller: 'CarouselController',
     controllerAs: 'carousel',
     require: 'carousel',
-    templateUrl: 'template/carousel/carousel.html',
+    templateUrl: function(element, attrs) {
+      return attrs.templateUrl || 'template/carousel/carousel.html';
+    },
     scope: {
       interval: '=',
       noTransition: '=',
@@ -309,7 +311,9 @@ function CarouselDemoCtrl($scope) {
     restrict: 'EA',
     transclude: true,
     replace: true,
-    templateUrl: 'template/carousel/slide.html',
+    templateUrl: function(element, attrs) {
+      return attrs.templateUrl || 'template/carousel/slide.html';
+    },
     scope: {
       active: '=?',
       index: '=?'

src/carousel/docs/README.md

@@ -4,4 +4,6 @@ The carousel also offers support for touchscreen devices in the form of swiping.
 
 Use a `<carousel>` element with `<slide>` elements inside it.  It will automatically cycle through the slides at a given rate, and a current-index variable will be kept in sync with the currently visible slide.
 
-Use the no-wrap attribute on a `<carousel>` element to control the looping of slides; setting no-wrap to an expression which evaluates to a truthy value will prevent looping
+Use the `no-wrap` attribute on a `<carousel>` element to control the looping of slides; setting `no-wrap` to an expression which evaluates to a truthy value will prevent looping
+
+Use the `template-url` attribute on a `<carousel>` or `<slide>` element to specify the url of a custom template to override the default templates

src/carousel/test/carousel.spec.js

@@ -14,12 +14,13 @@ describe('carousel', function() {
   }));
   beforeEach(module('template/carousel/carousel.html', 'template/carousel/slide.html'));
 
-  var $rootScope, $compile, $controller, $interval;
-  beforeEach(inject(function(_$rootScope_, _$compile_, _$controller_, _$interval_) {
+  var $rootScope, $compile, $controller, $interval, $templateCache;
+  beforeEach(inject(function(_$rootScope_, _$compile_, _$controller_, _$interval_, _$templateCache_) {
     $rootScope = _$rootScope_;
     $compile = _$compile_;
     $controller = _$controller_;
     $interval = _$interval_;
+    $templateCache = _$templateCache_;
   }));
 
   describe('basics', function() {
@@ -53,6 +54,29 @@ describe('carousel', function() {
       }
     }
 
+    it('should allow overriding of the carousel template', function() {
+      $templateCache.put('foo/bar.html', '<div>foo</div>');
+
+      elm = $compile('<carousel template-url="foo/bar.html"></carousel>')(scope);
+      $rootScope.$digest();
+
+      expect(elm.html()).toBe('foo');
+    });
+
+    it('should allow overriding of the slide template', function() {
+      $templateCache.put('foo/bar.html', '<div class="slide">bar</div>');
+
+      elm = $compile(
+        '<carousel interval="interval" no-transition="true" no-pause="nopause">' +
+          '<slide template-url="foo/bar.html"></slide>' + 
+        '</carousel>'
+      )(scope);
+      $rootScope.$digest();
+
+      var slide = elm.find('.slide');
+      expect(slide.html()).toBe('bar');
+    });
+
     it('should set the selected slide to active = true', function() {
       expect(scope.slides[0].content).toBe('one');
       testSlideActive(0);