Angular UI Bootstrap typeahead-append-to

Question

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

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

我这辈子都想不出要把这个值设置成什么！我已经尝试了“#elementId”和“.elementClass”的所有组合，但仍然没有成功。

我可以使用 typeahead-append-to-body="true" 向正文附加任何问题，但这不是我想要做的。

请帮忙！

干杯

Answer 1

已过时，请参阅最新方法的编辑部分

typeahead-append-to 属性希望您在控制器中引用一个元素并绑定到该元素：

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

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

typeahead指令中读取属性并追加元素的代码可见here

编辑

该指令已更新，将接受如下选择器字符串：

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

Answer 2

我的小指令：

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);
        }]
    }
}])

然后将这些属性添加到输入中：

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

希望对某人有所帮助

Answer 3

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

所以，对 necropost 感到抱歉，但我今天正在看这个，认为所选的解决方案似乎很奇怪，我的头撞了几个小时。虽然所选解决方案 可能 在某一时刻是正确的，但截至目前，根本没有必要引用引用 DOM 对象的范围 属性 .您所要做的就是传递一个选择器（我尝试了一个 ID——其他选择器可能会变得粗略），但将其用单引号括在属性中的双引号内。所以：

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

不会但

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

将 工作。注意额外的单引号：" ' #myTargetElement ' ".