feat(typeahead): added popup template url property

src/typeahead/docs/demo.html

@@ -4,6 +4,16 @@
       <span bind-html-unsafe="match.label | typeaheadHighlight:query"></span>
   </a>
 </script>
+
+<script type="text/ng-template" id="customPopupTemplate.html">
+  <ul class="f-dropdown" ng-style="{display: isOpen()&&'block' || 'none', top: position.top+'px', left: position.left+'px'}">
+      <li><span class="label text-justify" style="display: block">Countries:</span></li>
+      <li ng-repeat="match in matches" ng-class="{active: isActive($index) }" ng-mouseenter="selectActive($index)" ng-click="selectMatch($index)">
+        <div typeahead-match index="$index" match="match" query="query" template-url="templateUrl"></div>
+      </li>
+  </ul>
+</script>
+
 <div class='container-fluid' ng-controller="TypeaheadCtrl">
 
     <h4>Static arrays</h4>
@@ -18,4 +28,8 @@ <h4>Asynchronous results</h4>
     <h4>Custom templates for results</h4>
     <pre>Model: {{customSelected | json}}</pre>
     <input type="text" ng-model="customSelected" placeholder="Custom template" typeahead="state as state.name for state in statesWithFlags | filter:{name:$viewValue}" typeahead-template-url="customTemplate.html" class="form-control">
+
+    <h4>Custom templates for results popup</h4>
+    <pre>Model: {{customSelected | json}}</pre>
+    <input type="text" ng-model="customSelected" placeholder="Custom template" typeahead="state as state.name for state in statesWithFlags | filter:{name:$viewValue}" typeahead-popup-template-url="customPopupTemplate.html" class="form-control">
 </div>

src/typeahead/docs/readme.md

@@ -45,6 +45,10 @@ The typeahead directives provide several attributes:
    :
    Set custom item template
 
+* `typeahead-popup-template-url` <i class="glyphicon glyphicon-eye-open"></i>
+   :
+   Set custom results 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

src/typeahead/test/typeahead-popup.spec.js

@@ -1,14 +1,15 @@
 describe('typeaheadPopup - result rendering', function () {
 
-  var scope, $rootScope, $compile;
+  var scope, $rootScope, $compile, $templateCache;
 
   beforeEach(module('mm.foundation.typeahead'));
   beforeEach(module('template/typeahead/typeahead-popup.html'));
   beforeEach(module('template/typeahead/typeahead-match.html'));
-  beforeEach(inject(function (_$rootScope_, _$compile_) {
+  beforeEach(inject(function (_$rootScope_, _$compile_, _$templateCache_) {
     $rootScope = _$rootScope_;
     scope = $rootScope.$new();
     $compile = _$compile_;
+    $templateCache = _$templateCache_;
   }));
 
   it('should render initial results', function () {
@@ -58,4 +59,17 @@ describe('typeaheadPopup - result rendering', function () {
     liElems.eq(2).find('a').trigger('click');
     expect($rootScope.select).toHaveBeenCalledWith(2);
   });
+
+  it('should allow a custom template', function () {
+    $templateCache.put('/custom', '<div id="custom-template">Some content</div>');
+    spyOn($templateCache, 'get').andCallThrough();
+
+    var el = $compile("<div><typeahead-popup matches='matches' active='active' popup-template-url='/custom' select='select(activeIdx)'></typeahead-popup></div>")(scope);
+    $rootScope.$digest();
+
+    expect($templateCache.get).toHaveBeenCalledWith('/custom');
+    var divElem = el.find('div#custom-template');
+    expect(divElem.html()).toContain('Some content');
+  });
+
 });

src/typeahead/typeahead.js

@@ -83,6 +83,10 @@ angular.module('mm.foundation.typeahead', ['mm.foundation.position', 'mm.foundat
         popUpEl.attr('template-url', attrs.typeaheadTemplateUrl);
       }
 
+      if (angular.isDefined(attrs.typeaheadPopupTemplateUrl)) {
+        popUpEl.attr('popup-template-url', attrs.typeaheadPopupTemplateUrl);
+      }
+
       //create a child scope for the typeahead directive so we are not polluting original scope
       //with typeahead-specific data (matches, query etc.)
       var scope = originalScope.$new();
@@ -298,7 +302,9 @@ angular.module('mm.foundation.typeahead', ['mm.foundation.position', 'mm.foundat
         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;