角度ui引導程序提前-添加類，當附加到正文時

Question

我在項目中提前使用了角度引導程序。 並且有幾個實例正在使用中。

http://angular-ui.github.io/bootstrap/#/typeahead

使用選項“ typeahead-append-body”將它們中的兩個直接附加到主體，因此對於一個實例，我需要自定義表示，即可以僅將css類添加到該特定實例，即ul，下拉列表-它創建的菜單。 但是無法做到這一點，因為我找不到任何方法。 如果將它附加到輸入元素的父項上，那會很容易，但是如果將其附加到正文中，則似乎很困難。

<input type="text" typeahead-append-to-body="true" typeahead="state as state.name for state in statesWithFlags | filter:{name:$viewValue}" typeahead-template-url="customTemplate.html">

我不想直接使用body> .dropdown-menu作為目標，因為它也會影響其他實例。

Answer 1

我終於意識到，我可以簡單地使用css屬性選擇器來定位我正在使用的html模板。

在輸入typeahead中提到的attibute“ typeahead-template-url ='mysearchdropdownpage.html'”的幫助下，我在CSS中寫了以下內容。

的HTML

<input type="search" typeahead="searchItem for searchItem in searchTypeAhead" typeahead-template-url = 'mysearchdropdownpage.html' />

的CSS

ul.dropdown-menu[template-url='mysearchdropdownpage.html']

和它的作品。

Answer 2

基本上，您可以在input標簽中添加一個類，以便更准確地引用下拉菜單...

<input class="u-targetting-typeahead" ...>

...然后，在css文件中...

.u-targetting-typeahead > .dropdown-menu

...然后僅引用該輸入的下拉菜單。

下拉菜單是即時創建的，但是輸入是用HTML創建的，當您想成為特定輸入時，它應該是用於創建參考點的元素。

調整

看着 ...

typeahead-append-to-body （默認值：false）：是否應將typeahead彈出窗口附加到$ body而不是父元素？

如果將其設置為false ，則上述方法將起作用。 我看不到其他合理的選擇。