AngularJS UI 그리드 및 Popover 정렬

Question

안녕하세요, 저는 AngularJS의 UI 그리드에 popover를 추가하고 있습니다. 생각은 사용자가 팝 오버 (popover) 행을 마우스로 올려 놓고 popover가 지시어를 포함 할 때입니다. 나는 성공적으로이 부분을 구현했습니다,하지만 지금 문제는 팝 오버의 일부는 다음과 같이 UI를 그리드 표에 의해 차단된다 :

내가 전면에 팝 오버를 가지고 싶어, 내가 ' ve는 ui 표와 popover 모두에 대해 z- 색인을 설정하려고했습니다.

JS 부분 :

function rowTemplate() { 
    var template = []; 
    ... 
    template.push('popover-template="\'popover.html\'" popover-placement="bottom" popover-trigger="click"></div>'); 
    return template.join(' '); 
} 

HTML : 관련 코드는 여기에

<div class="gridStyle" ui-grid="vm.grid" ui-grid-resize-column ui-grid-selection style="margin-top:0px; height:200px; z-index: 4; position: relative"> 
</div> 

<script type="text/ng-template" id="popover.html"> 
    <div style="height: 150px; width: 600px; overflow-x: auto; overflow-y: hidden; z-index: 10; position: relative"> 
     <directive-related part /> 
    </div> 
</script> 

하지만 Z- 인덱스를 설정 한 후 여전히 작동하지 않습니다. 이 문제를 어떻게 해결할 수 있습니까? 내 참조는 여기에 있습니다 : popover : popover, z-index : z-index.

감사합니다.

Answer 1

참고 : 여기서는 ui-bootstrap을 사용한다고 가정합니다.

대개 ui-grid 사용자 지정 형식과 함께 append-to-body 특성을 사용해야 함을 발견했습니다.

template.push('popover-template="\'popover.html\'" popover-append-to-body="true" popover-placement="bottom" popover-trigger="click"></div>')