如何在Angular App中創建自定義上下文菜單？

我一直在一個角度的應用程序中的我的意見之一的表上的自定義上下文菜單工作。這個想法是顯示一個隱藏的，絕對位置的分區右鍵單擊此表中的任何特定行。如何在Angular App中創建自定義上下文菜單？

我認爲事件正在返回正確的clientX和clientY，但是我遇到麻煩的地方是當我嘗試將此隱藏div定位到右鍵單擊事件的座標時。什麼我使用的，現在，是這樣的：

$('.toggled-options-status-change').css({ 
    top: event.clientX, 
    left: event.clientY 
}).show();

其中.toggled-options-status-change是隱藏的div的類名稱。

基本上發生的事情是，div的位置看起來是隨機點，所以它不能簡單地通過減少頂部和左側位置爲固定值來固定。

我很難說出發生了什麼，我希望我可以與你們分享一個小提琴或其他東西。我所希望的是，有人遇到過這樣的問題，並知道進一步調查的方向。

編輯 - CSS

.toggled-options-status-change { 
    position: absolute; 
    display: none; 
} 

.off-canvas-wrap { 
    -webkit-backface-visibility: hidden; 
    position: relative; 
    width: 100%; 
    overflow: hidden; 

.inner-wrap { 
    -webkit-backface-visibility: hidden; 
    position: relative; 
    width: 100%; 
    -webkit-transition: -webkit-transform 500ms ease; 
    -moz-transition: -moz-transform 500ms ease; 
    -ms-transition: -ms-transform 500ms ease; 
    -o-transition: -o-transform 500ms ease; 
    transition: transform 500ms ease; 
}

編輯 - HTML

有關HTML大綱：

<html> 
    <body> 
    <div class="off-canvas-wrap"> 
     <div class="inner-wrap"> 
     <div ng-view> 
      ... 
     </div> 
     </div> 
    </div> 
    </body> 
</html>

來源

2015-10-21 Peter Ward

你可以發佈對應於'toggled-options-status-change'類的css嗎？ –

當然。請參閱OP –

此元素是否在身體的根部？如果沒有任何定位元素是祖先將導致它不能正確定位。請顯示所有相關代碼..事件處理程序和html大綱結構 – charlietfl

幾乎總是與這些事情，至少對我來說，答案非常簡單，而且很好在我第一次看到它的時候，我看起來像個傻瓜。噢，無論如何都很好。

top應該是clientY，而不是clientX，反之亦然。 omg

來源

2015-10-22 02:02:47

如何在Angular App中創建自定義上下文菜單？

回答

相關問題