feat(typeahead): add custom popup template support

- Add support for custom popup templates Closes #4320 Resolves #3774
angular-ui · Sep 1, 2015 · 4b02648 · 4b02648
1 parent aa5a991
commit 4b02648
Show file tree

Hide file tree

Showing 3 changed files with 28 additions and 7 deletions.
diff --git 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` <i class="glyphicon glyphicon-eye-open"></i>
    _(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
@@ -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,17 +318,27 @@ 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', '<div class="custom">foo</div>');
+
+      var element = prepareInputEl('<div><input ng-model="result" typeahead-popup-template-url="custom.html" typeahead="state as state.name for state in states | filter:$viewValue"></div>');
+
+      changeInputValueTo(element, 'Al');
+
+      expect(element.find('.custom').text()).toBe('foo');
+    });
+
+    it('should support custom templates for matched items', function() {
       $templateCache.put('custom.html', '<p>{{ index }} {{ match.label }}</p>');
 
       var element = prepareInputEl('<div><input ng-model="result" typeahead-template-url="custom.html" typeahead="state as state.name for state in states | filter:$viewValue"></div>');
 
       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', '<p child-directive>{{ index }} {{ match.label }}</p>');
 
       var element = prepareInputEl('<div><input ng-model="result" typeahead-template-url="custom.html" typeahead="state as state.name for state in states | filter:$viewValue"></div>');
@@ -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
@@ -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;