角度のUIブートストラップtypeahead-append-to

Question

私はHTMLのカスタム要素にAngular UI Typeaheadコントロールを追加しようとしています。ドキュメントには次のように書かれています：

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

私はこの値を設定することはできません。私は '#elementId'と '.elementClass'のすべての組み合わせを試しましたが、まだ運がありません。

私はbodyにtypeahead-append-to-body = "true"を追加することはできませんが、それは私がしたいことではありません。

お願いします！

乾杯

Answer 1

古い属性する先行入力-追記LATESTアプローチのエディット・セクション

SEEあなたのコントローラ内の要素を参照し、それにバインドすることを期待：

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

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

属性を読み取り要素を付加するtypeahead指示文のコードは、here

EDIT

ディレクティブが更新されているので、のようなセレクタ文字列受け付けます。そして、これらattrsにを追加

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

：

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

Answer 2

私の小さなディレクティブを入力：

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

希望necropostて申し訳ありません、だから、誰か

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.)

に役立ちますが、私は今日、このを見て、選択したソリューションは奇妙に思えたし、数時間のためにそれに対して私の頭を強打することを考えていました。選択された解答がであるのに対し、現在のところ、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 '"