Angular UI Bootstrap typeahead-append-to

Question

I am trying to add an Angular UI Typeahead control to a user element in my HTML. Documents state the following:

typeahead-append-to $ (default: null). Should the typeahead popup be added to the element instead of the parent element?

I can’t understand for life how to set this value! I tried all combinations of "#elementId" and ".lementClass", but still no luck.

I can add to my body no problems with typeahead-append-to-body = "true", but that’s not what I want to do.

Help me please!

Greetings

Answer 1

NEXT SEE EDIT SECTION FOR THE LAST APPROACH

The typeahead-append-to attribute expects a reference to an element in your controller and a binding to this:

$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 an attribute and adds an element can be seen here

EDIT

The directive is updated and will accept the selector line as follows:

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

Answer 2

( UPDATE: The user-selected answer to this question has since been updated by an appendix that includes the current and correct way to accomplish this.)

So, sorry for the necropolis, but I looked at it today and thought that the chosen solution seemed strange, and hit my head on it for several hours. Although the solution you select could be true at some point, at the moment it is not necessary to refer to the scope property, which refers to the DOM object. All you have to do is pass the selector (I tried the identifier - other selectors may be sketchy), but wrap it with single quotes inside your double quotes in the attribute. So:

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

won't work but

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

will work. Note the extra single quotes: " ' #myTargetElement ' ".

Answer 3

My little directive:

 angular.module('typeahead-append-to-selector', ['ui.bootstrap']) angular.module('typeahead-append-to-selector').directive('typeaheadAppendToSelector', [function () { return { controller: ['$scope', '$attrs', function ($scope, $attrs) { $scope.typeaheadAppendTo = document.querySelector($attrs.typeaheadAppendToSelector); }] } }]) 

then add these attrs to the input:

 typeahead-append-to="typeaheadAppendTo" typeahead-append-to-selector="#appendToThis" 

Hope someone help