Skip to content
This repository has been archived by the owner on May 29, 2019. It is now read-only.

feat(carousel): add templateUrl support #4141

Closed
Closed
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 6 additions & 2 deletions src/carousel/carousel.js
Original file line number Diff line number Diff line change
Expand Up @@ -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: '=',
Expand Down Expand Up @@ -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: '=?'
Expand Down
4 changes: 3 additions & 1 deletion src/carousel/docs/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -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
28 changes: 26 additions & 2 deletions src/carousel/test/carousel.spec.js
Original file line number Diff line number Diff line change
Expand Up @@ -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() {
Expand Down Expand Up @@ -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);
Expand Down