Angular typeahead, set custom popup template

Question

is there anyway to set custom template for typeahead-popup?

the "typeahead-template-url" directive is only for every match in popup.

here is my code:

    <input class="select-location" id="Location" type="text"
 ng-model="model.location" 
 ng-keypress="keypress($event)"
 typeahead="match for match in getLocations($viewValue)"
 typeahead-template-url="matchUrl"/>

Answer 1

You can use AngularJS decorators which allow you to modify directives (also services and just about anything) while they are being instantiated.

They are AngularJS's version of monkey patching. In the future if you want to modify other directives the pattern is the following when using the .decorator method.

[nameOfDirective]Directive e.g: typeaheadPopupDirective

var app = angular.module("monkey", ["ui.bootstrap"]);
app.config(function ($provide) {
    $provide.decorator("typeaheadPopupDirective", function ($delegate) {
        $delegate[0].templateUrl = "template/typeahead/typeahead-popup-ALTERNATIVE.html";
        return $delegate;
    });
});

Here's a demonstration of this working with the original ui-bootstrap directive. You should be getting a 404 error while the directive tries to fetch the new template URL.

http://plnkr.co/edit/0mPADZ7D7Eszp07R2g60?p=preview

---

Official Documentation on decorators.

A service decorator intercepts the creation of a service, allowing it to override or modify the behaviour of the service. The object returned by the decorator may be the original service, or a new service object which replaces or wraps and delegates to the original service.

Update

As of angular bootstrap 0.14.x, this feature is now supported natively. in typeahead directive you can specify the template to be used for the popup by using typeahead-popup-template-url attribute.

<input type="text" ng-model="selected"
     typeahead="state for state in states | filter:$viewValue
     typeahead-append-to-body="true"
     typeahead-popup-template-url="customPopUp.html"
     class="form-control">