как открыть пользовательское раскрывающийся вверх

Question

В настоящее время я работаю над пользовательскими AngularJS падения вниз, которое представлено в HTML структуру ниже:

<div> 
    <label></label> 
    <div> 
    <a ng-class="{active: popover}"> 
     <div></div> <!-- the selected item --> 
    </a> 
    <div style="position: relative;"> <!-- THIS is the div that presents --> 
             <!-- the list with the menu items--> 
     <div class="popover" ng-class="{popover-show}"> 
     <input /> <--! this is a search box --> 
     <ul ng-repeat="item in items"> 
     </ul> 
     </div> 
    </div> 
    </div> 
</div> 

Правило для .popover и .popover- показать это из Twitter Bootstrap, но имеют дополнительные правила ниже:

.popover{ 
    top: 20px; 
    left: auto; 
    right: 0; 
    max-width: none; 
    border-collapse: separate; 
} 
.popover.popover-show { 
    display : block !important; 
} 

ДИВ с postition:relative является тот, который завернуть директива, кажется, работает хорошо. Однако, когда он расположен ниже середины страницы, и у него слишком много элементов, поэтому по умолчанию высота окна превышает вертикальную прокрутку строки. Я искал другие подобные вопросы, но ни один из них не был достаточно близок к моему делу. Итак, мой вопрос заключается в том, что было бы самым умным способом обнаружить, когда я собираюсь превысить высоту окна (и, конечно, лучшее место для этого - CSS, директива) и установить нижнюю границу в 0?

Заранее благодарен!

UPDATE: Я пытаюсь обойти без использования JQuery и JS файлы для Twitter Bootstrap

Answer 1

использовать данные-плейсмент =»" идентификатор

это как сделать это для поповер:

HTML <a href="#" title="Header" data-toggle="popover" data-placement="bottom" data-content="Content">Click</a>

JS

<script> 
$(document).ready(function(){ 
    $('[data-toggle="popover"]').popover(); 
}); 
</script> 

Для выпадающего это будет работать, чтобы перейти от падения вниз, чтобы падать вверх,
HTML

<div class="dropup"> 
    <ul class="dropdown-menu" role="menu" aria-labelledby="dLabel"> 
</div>