Угловой пользовательский интерфейс 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

устаревшую ПРОЧТИТЕ EDIT РАЗДЕЛ ДЛЯ ПОСЛЕДНЕГО ПОДХОД

машинописный-конкатенирующего приписывать ожидает ссылаться на элемент в контроллере и привязывать к этому:

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

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

Код в директиве typeahead, которая считывает атрибут и добавляет элемент, можно увидеть here

EDIT

Директива была обновлена ​​и будет принимать строку выбора, как так:

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

затем добавить эти AttrS в вход:

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, но я смотрел на это сегодня и думать, что выбранное решение казалось странным, и ударилась головой против него в течение нескольких часов. Хотя выбранное решение может было истинным в какой-то момент, на данный момент совсем не обязательно ссылаться на свойство scope, которое ссылается на объект DOM. Все, что вам нужно сделать, это передать селектор (я попробовал идентификатор - другие селекторы могут быть отрывочными), но оберните его одиночными кавычками внутри ваших двойных кавычек в атрибуте. Итак:

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