From e2238174d282c8e71684bcbd8d8f5a88763b9eab Mon Sep 17 00:00:00 2001 From: Pawel Kozlowski Date: Sat, 6 Jul 2013 16:56:51 +0200 Subject: [PATCH] feat(typeahead): support custom templates for matched items Closes #182 --- src/typeahead/test/typeahead-popup.spec.js | 3 ++- src/typeahead/test/typeahead.spec.js | 15 +++++++++++- src/typeahead/typeahead.js | 24 ++++++++++++++++++- template/typeahead/typeahead-match.html | 1 + .../{typeahead.html => typeahead-popup.html} | 4 ++-- 5 files changed, 42 insertions(+), 5 deletions(-) create mode 100644 template/typeahead/typeahead-match.html rename template/typeahead/{typeahead.html => typeahead-popup.html} (54%) diff --git a/src/typeahead/test/typeahead-popup.spec.js b/src/typeahead/test/typeahead-popup.spec.js index dd42423437..9ab1b18373 100644 --- a/src/typeahead/test/typeahead-popup.spec.js +++ b/src/typeahead/test/typeahead-popup.spec.js @@ -3,7 +3,8 @@ describe('typeaheadPopup - result rendering', function () { var scope, $rootScope, $compile; beforeEach(module('ui.bootstrap.typeahead')); - beforeEach(module('template/typeahead/typeahead.html')); + beforeEach(module('template/typeahead/typeahead-popup.html')); + beforeEach(module('template/typeahead/typeahead-match.html')); beforeEach(inject(function (_$rootScope_, _$compile_) { $rootScope = _$rootScope_; scope = $rootScope.$new(); diff --git a/src/typeahead/test/typeahead.spec.js b/src/typeahead/test/typeahead.spec.js index 89c893dea8..e76e511c92 100644 --- a/src/typeahead/test/typeahead.spec.js +++ b/src/typeahead/test/typeahead.spec.js @@ -4,7 +4,8 @@ describe('typeahead tests', function () { var changeInputValueTo; beforeEach(module('ui.bootstrap.typeahead')); - beforeEach(module('template/typeahead/typeahead.html')); + beforeEach(module('template/typeahead/typeahead-popup.html')); + beforeEach(module('template/typeahead/typeahead-match.html')); beforeEach(module(function($compileProvider) { $compileProvider.directive('formatter', function () { return { @@ -218,6 +219,18 @@ describe('typeahead tests', function () { expect(values).toContain('second'); })); + + it('should support custom templates for matched items', inject(function ($templateCache) { + + $templateCache.put('custom.html', '

{{ match.label }}

'); + + var element = prepareInputEl("
"); + var inputEl = findInput(element); + + changeInputValueTo(element, 'Al'); + + expect(findMatches(element).eq(0).find('p').text()).toEqual('Alaska'); + })); }); describe('selecting a match', function () { diff --git a/src/typeahead/typeahead.js b/src/typeahead/typeahead.js index 8a128fce14..2e864f01e0 100644 --- a/src/typeahead/typeahead.js +++ b/src/typeahead/typeahead.js @@ -74,6 +74,10 @@ angular.module('ui.bootstrap.typeahead', ['ui.bootstrap.position']) query: 'query', position: 'position' }); + //custom item template + if (angular.isDefined(attrs.typeaheadTemplateUrl)) { + popUpEl.attr('template-url', attrs.typeaheadTemplateUrl); + } //create a child scope for the typeahead directive so we are not polluting original scope //with typeahead-specific data (matches, query etc.) @@ -252,9 +256,11 @@ angular.module('ui.bootstrap.typeahead', ['ui.bootstrap.position']) select:'&' }, replace:true, - templateUrl:'template/typeahead/typeahead.html', + templateUrl:'template/typeahead/typeahead-popup.html', link:function (scope, element, attrs) { + scope.templateUrl = attrs.templateUrl; + scope.isOpen = function () { return scope.matches.length > 0; }; @@ -274,6 +280,22 @@ angular.module('ui.bootstrap.typeahead', ['ui.bootstrap.position']) }; }) + .directive('typeaheadMatch', ['$http', '$templateCache', '$compile', '$parse', function ($http, $templateCache, $compile, $parse) { + return { + restrict:'E', + scope:{ + match:'=', + query:'=' + }, + link:function (scope, element, attrs) { + var tplUrl = $parse(attrs.templateUrl)(scope.$parent) || 'template/typeahead/typeahead-match.html'; + $http.get(tplUrl, {cache: $templateCache}).success(function(tplContent){ + element.replaceWith($compile(tplContent.trim())(scope)); + }); + } + }; + }]) + .filter('typeaheadHighlight', function() { function escapeRegexp(queryToEscape) { diff --git a/template/typeahead/typeahead-match.html b/template/typeahead/typeahead-match.html new file mode 100644 index 0000000000..5a660df0f1 --- /dev/null +++ b/template/typeahead/typeahead-match.html @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/template/typeahead/typeahead.html b/template/typeahead/typeahead-popup.html similarity index 54% rename from template/typeahead/typeahead.html rename to template/typeahead/typeahead-popup.html index 2a7b9d7725..f0efda19fa 100644 --- a/template/typeahead/typeahead.html +++ b/template/typeahead/typeahead-popup.html @@ -1,5 +1,5 @@ \ No newline at end of file