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:

我正在尝试将Angular UI Typeahead控件附加到HTML中的自定义元素。文档说明了这一点:

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

typeahead-append-to $(默认值:null) - 是否应将typeahead弹出窗口附加到元素而不是父元素?

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.

我不能为我的生活图什么设置这个值!我已经尝试了'#elementId'和'.elementClass'的所有组合,但仍然没有运气。

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

我可以附加到身体没有类型为appea-append-to-body =“true”的probs,但这不是我想要做的。

Help please!

Cheers

3 个解决方案

#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:

typeahead-append-to属性要求您引用控制器中的元素并绑定到该元素:

$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

可以在此处看到typeahead指令中读取属性并附加元素的代码

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

#2

(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:

所以,对于necropost很抱歉,但我今天看着这个,并且认为所选择的解决方案看起来很奇怪,并且在几个小时内撞击它。虽然所选择的解决方案可能在某一时刻是正确的,但截至目前,并不需要引用引用DOM对象的范围属性。您所要做的就是传递一个选择器(我尝试了一个ID--其他选择器可能会变得粗略)但是在属性中的双引号内用单引号将它包装起来。所以:

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

将工作。请注意额外的单引号:“'#myTargetElement'”。

#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:

然后将这些attrs添加到输入:

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

Hope that helps someone

希望能帮助别人

#1