diff --git a/src/typeahead/docs/readme.md b/src/typeahead/docs/readme.md index dc37115517..3e8d1cf3a3 100644 --- a/src/typeahead/docs/readme.md +++ b/src/typeahead/docs/readme.md @@ -60,6 +60,10 @@ The typeahead directives provide several attributes: : Set custom item template +* `typeahead-popup-template-url` + _(Defaults: `template/typeahead/typeahead-popup.html`)_ : + Set custom popup template + * `typeahead-wait-ms` _(Defaults: 0)_ : Minimal wait time after last character typed before typeahead kicks-in diff --git a/src/typeahead/test/typeahead.spec.js b/src/typeahead/test/typeahead.spec.js index 601b13becb..67c3c54fc3 100644 --- a/src/typeahead/test/typeahead.spec.js +++ b/src/typeahead/test/typeahead.spec.js @@ -1,5 +1,5 @@ describe('typeahead tests', function() { - var $scope, $compile, $document, $timeout; + var $scope, $compile, $document, $templateCache, $timeout; var changeInputValueTo; beforeEach(module('ui.bootstrap.typeahead')); @@ -25,7 +25,7 @@ describe('typeahead tests', function() { }; }); })); - beforeEach(inject(function(_$rootScope_, _$compile_, _$document_, _$timeout_, $sniffer) { + beforeEach(inject(function(_$rootScope_, _$compile_, _$document_, _$templateCache_, _$timeout_, $sniffer) { $scope = _$rootScope_; $scope.source = ['foo', 'bar', 'baz']; $scope.states = [ @@ -34,6 +34,7 @@ describe('typeahead tests', function() { ]; $compile = _$compile_; $document = _$document_; + $templateCache = _$templateCache_; $timeout = _$timeout_; changeInputValueTo = function(element, value) { var inputEl = findInput(element); @@ -317,7 +318,17 @@ describe('typeahead tests', function() { expect(values).toContain('second'); })); - it('should support custom templates for matched items', inject(function($templateCache) { + it('should support custom popup templates', function() { + $templateCache.put('custom.html', '
{{ index }} {{ match.label }}
'); var element = prepareInputEl(''); @@ -325,9 +336,9 @@ describe('typeahead tests', function() { changeInputValueTo(element, 'Al'); expect(findMatches(element).eq(0).find('p').text()).toEqual('0 Alaska'); - })); + }); - it('should support directives which require controllers in custom templates for matched items', inject(function($templateCache) { + it('should support directives which require controllers in custom templates for matched items', function() { $templateCache.put('custom.html', '{{ index }} {{ match.label }}
'); var element = prepareInputEl(''); @@ -337,7 +348,7 @@ describe('typeahead tests', function() { changeInputValueTo(element, 'Al'); expect(findMatches(element).eq(0).find('p').text()).toEqual('0 Alaska'); - })); + }); it('should throw error on invalid expression', function() { var prepareInvalidDir = function() { diff --git a/src/typeahead/typeahead.js b/src/typeahead/typeahead.js index 08c8afc423..fd19ed1632 100644 --- a/src/typeahead/typeahead.js +++ b/src/typeahead/typeahead.js @@ -129,6 +129,10 @@ angular.module('ui.bootstrap.typeahead', ['ui.bootstrap.position']) popUpEl.attr('template-url', attrs.typeaheadTemplateUrl); } + if (angular.isDefined(attrs.typeaheadPopupTemplateUrl)) { + popUpEl.attr('popup-template-url', attrs.typeaheadPopupTemplateUrl); + } + var resetMatches = function() { scope.matches = []; scope.activeIdx = -1; @@ -451,7 +455,9 @@ angular.module('ui.bootstrap.typeahead', ['ui.bootstrap.position']) select: '&' }, replace: true, - templateUrl: 'template/typeahead/typeahead-popup.html', + templateUrl: function(element, attrs) { + return attrs.popupTemplateUrl || 'template/typeahead/typeahead-popup.html'; + }, link: function(scope, element, attrs) { scope.templateUrl = attrs.templateUrl;