Angular UI Bootstrap typeahead-append-to

Question

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

Alexander Nied · Accepted Answer · 2017-04-28 20:24:12Z

4

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

So, sorry to necropost, but I was looking at this today and thinking that the selected solution seemed strange, and banged my head against it for a few hours. While the selected solution may have been true at one point, as of right now it is not at all necessary to reference a scope property that references a DOM object. All you have to do is pass a selector (I tried an ID-- other selectors might get sketchy) but wrap it in 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 ' ".

edited Apr 28, 2017 at 20:24

answered Oct 14, 2016 at 20:06

Alexander Nied

13.8k4 gold badges30 silver badges50 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Rob J Over a year ago

Th code that reads in the append to attribute value is here: github.com/angular-ui/bootstrap/blob/master/src/typeahead/… where originalScope.$eval(attrs.typeAheadAppendTo) tries to read the value from the consuming scope. And here: github.com/angular-ui/bootstrap/blob/master/src/typeahead/… is where it appends the popup to the append to element. So it's using your selector '#myTargetElement' in the angular.element() method. The single quotes wrapped around your attribute value tell Angular it is a string literal and don't bother parsing.

Rob J Over a year ago

Hence my edit where I demonstrate how to use a selector string wrapped in single quotes.

Rob J · Accepted Answer · 2017-04-28 19:31:05Z

1

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

edited Apr 28, 2017 at 19:31

answered Apr 12, 2016 at 12:57

Rob J

6,6295 gold badges30 silver badges30 bronze badges

2 Comments

Maccurt Over a year ago

My only issue with this is having elements in your controller. Your controller should be clean of HTML elements, etc..

romiem Over a year ago

In Angular 1.5, this is unfortunately not allowed as you cannot pass DOM elements via angular expressions. Angular throws the following error: docs.angularjs.org/error/$parse/isecdom

rob_james · Accepted Answer · 2016-09-14 13:40:17Z

0

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 that helps someone

answered Sep 14, 2016 at 13:40

rob_james

1,3201 gold badge12 silver badges17 bronze badges

Collectives™ on Stack Overflow

Angular UI Bootstrap typeahead-append-to

3 Answers 3

2 Comments

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related