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"/>
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">
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With