angularjsangular-ui-bootstrapangular-uiangular-ui-typeahead

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

Solution

  • OUTDATED SEE THE EDIT SECTION FOR LATEST APPROACH

    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

    EDIT

    The directive has been updated and will accept a selector string like so:

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