feat(typeahead): support custom templates for matched items

Closes #182

Author: pkozlowski-opensource

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();

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', '<p>{{ 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>");
+      var inputEl = findInput(element);
+
+      changeInputValueTo(element, 'Al');
+
+      expect(findMatches(element).eq(0).find('p').text()).toEqual('Alaska');
+    }));
   });
 
   describe('selecting a match', function () {

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) {

template/typeahead/typeahead-match.html

@@ -0,0 +1 @@
+<a tabindex="-1" ng-bind-html-unsafe="match.label | typeaheadHighlight:query"></a>

template/typeahead/typeahead.html template/typeahead/typeahead-popup.html

@@ -1,5 +1,5 @@
 <ul class="typeahead dropdown-menu" ng-style="{display: isOpen()&&'block' || 'none', top: position.top+'px', left: position.left+'px'}">
-    <li ng-repeat="match in matches" ng-class="{active: isActive($index) }" ng-mouseenter="selectActive($index)">
-        <a tabindex="-1" ng-click="selectMatch($index)" ng-bind-html-unsafe="match.label | typeaheadHighlight:query"></a>
+    <li ng-repeat="match in matches" ng-class="{active: isActive($index) }" ng-mouseenter="selectActive($index)" ng-click="selectMatch($index)">
+        <typeahead-match match="match" query="query" template-url="templateUrl"></typeahead-match>
     </li>
 </ul>