Steve D Steve D - 2 months ago 100
AngularJS Question

Angular UI Bootstrap typeahead-append-to

I'm trying to append the Angular UI Typeahead control to a custom element in my HTML. The docs state this:


typeahead-append-to $ (Default: null) - Should the typeahead popup be appended to an element instead of the parent element?


I cannot for the life of me figure what to set this value to! I have tried all combinations of '#elementId' and '.elementClass' but still having no luck.

I can append to the body no probs with typeahead-append-to-body="true", but that's not what I want to do.

Help please!

Cheers

Answer

The typeahead-append-to attribute expects you to reference an element in your controller and bind to that:

$scope.appendToElement = window.document.querySelector('body');

<input uib-typeahead="val for val in vals" typeahead-append-to="appendToElement" />

The code in the typeahead directive that reads the attribute and appends the element can be seen here