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"/>

@desmati - please check following [link](http://stackoverflow.com/questions/26278701/setting-width-of-typeahead-drop-down-in-angularjs-project) — Gaurav Vachhani, Jul 18 '15 at 11:56
Could you specify which typeahead library are you using? There is a great number of them. — Sulthan, Jul 18 '15 at 17:32

score 5 · Accepted Answer · edited Nov 17 '15 at 14:49

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">

would you please add a reference to official documentations? @Ricardo Velhote — Hossein, Jul 18 '15 at 17:00
@desmati Of course. I edited the original message with that information :) — Ricardo Velhote, Jul 18 '15 at 17:06
thank you. is it possible to modify the directive inside the controller? the point is to have custom template per view. — Hossein, Jul 18 '15 at 18:44
@desmati You'd have to override the `link` function that is also available in the decorator. By overriding the `link` function you can make the template choice more customizable because then you'd be able to specify custom attributes in the HTML element and even access the scope where this directive is used. — Ricardo Velhote, Jul 18 '15 at 19:23

Angular typeahead, set custom popup template

1 Answers1