Question

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

typeahead-append-to $（默认值：null） - 是否应将typeahead弹出窗口附加到元素而不是父元素？

我不能为我的生活画出什么来设置这个值！我尝试了＃element;＆＃39;＃elementId＆＃39;的所有组合。和＆＃39; .elementClass＆＃39;但仍然没有运气。

我可以向身体追加没有类型为-adnd-append-to-body =＆＃34; true＆＃34;，但这不是我想做的事。

请帮忙！

干杯

Answer 1

（更新：此问题的用户选择的答案后来更新了一个附录，其中包含了实现此目的的当前正确方法。）

所以，对于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 '”。

Answer 2

过时查看最新方法的编辑部分

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 3

我的小指令：

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

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

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

希望能帮到某人

Angular UI Bootstrap typeahead-append-to

3 个答案: