AngularJS: Có phần tử theo con trỏ

Question

jsfiddle tại đây: https://jsfiddle.net/Flignats/jzrzo56u/3/

Tôi có một thành phần trên trang của tôi ban đầu bị ẩn (popover). Khi một phần tử khác trên trang được di chuột qua, tôi muốn cửa sổ bật lên hiển thị bên cạnh con trỏ.

Trong fiddle của tôi, tôi có 3 đoạn văn và cửa sổ bật lên. Khi con trỏ của người dùng nhập đoạn văn bản, cửa sổ bật lên được hiển thị. Khi con trỏ của người dùng rời khỏi phần tử, cửa sổ bật lên không còn được hiển thị nữa.

Tôi gặp sự cố khi truy xuất tọa độ con trỏ và định vị cửa sổ bật lên gần con trỏ.

Any help is appreciated :)

Mã kiễu góc:

var app = angular.module('myApp', []); 

app.controller('Ctrl',['$scope',function($scope) { 
$scope.name = 'Ray'; 
$scope.popover = false; 

//Method to show popover 
$scope.showPopover = function() { 
return $scope.popover = !$scope.popover; 
}; 


}]); 

HTML code:

<div ng-app="myApp" ng-controller="Ctrl"> 
    <div id="container"> 
    <p ng-mouseenter="showPopover()" ng-mouseleave="showPopover()">Square 1</p> 
    <p ng-mouseenter="showPopover()" ng-mouseleave="showPopover()">Square 2</p> 
    <p ng-mouseenter="showPopover()" ng-mouseleave="showPopover()">Square 3</p> 
    </div> 
    <div class="pop-availability" ng-show="popover"> 
    <div class="pop-title"> 
     <p>Title Content Goes Here</p> 
    </div> 
    <div class="pop-content"> 
     <table class="pop-table"> 
      <thead> 
       <tr> 
        <th></th> 
        <th ng-repeat='name in data.record'>{{name.name}}</th> 
       </tr> 
      </thead> 
      <tbody> 
       <tr> 
        <td>Row 1</td> 
        <td ng-repeat='available in data.record'>{{available.number}}</td> 
       </tr> 
       <tr> 
        <td>Row 2</td> 
        <td ng-repeat='unavailable in data.record'>{{unavailable.number}}</td> 
       </tr> 
       <tr> 
        <td>Row 3</td> 
        <td ng-repeat='unassigned in data.record'>{{unassigned.number}}</td> 
       </tr> 
      </tbody> 
     </table> 
    </div> 
</div> 
</div> 

Edit: Cập nhật jsfiddle để chụp tọa độ chuột. Vẫn gặp sự cố khi tải cửa sổ bật lên để di chuyển đến con trỏ: https://jsfiddle.net/Flignats/jzrzo56u/4/

Chỉnh sửa: Đến gần hơn, nhưng hơi lỗi! https://jsfiddle.net/Flignats/jzrzo56u/5/

Giải pháp: https://jsfiddle.net/Flignats/jzrzo56u/6/

Answer 1

JSFiddle

HTML - đã thêm tham số sự kiện $ đến chức năng showPopover

<p ng-mouseenter="showPopover($event)" ng-mouseleave="showPopover()">Square 1</p> 
<p ng-mouseenter="showPopover($event)" ng-mouseleave="showPopover()">Square 2</p> 
<p ng-mouseenter="showPopover($event)" ng-mouseleave="showPopover()">Square 3</p> 

và với ng-phong cách bạn có thể thay đổi vị trí Source

<div class="pop-availability" ng-show="popover" 
     ng-style="{left:field.left, 
        top:field.top}" > 

Javascript

//Method to show popover 
$scope.showPopover = function(mouseEvent) { 
if (!mouseEvent) 
    { 
    mouseEvent = window.event; 
    } 
    $scope.field.left = mouseEvent.pageX + 'px'; 
    $scope.field.top = mouseEvent.pageY+ 'px'; 
return $scope.popover = !$scope.popover; 
}; 

CSS thay đổi - bổ sung position:absolute

.pop-availability { 
    border-radius: 8px; 
    box-shadow: 0 0 10px 0 #969696; 
    display: inline-block; 
    min-width: 375px; 
    position:absolute; 
} 

Answer 2

Nếu bạn không nhớ một chút jQuery, điều này có vẻ như nó sẽ giúp bạn: http://jsfiddle.net/strangeline/jxqpv/light/

mã:

function getMousePos(evt) { 
    var doc = document.documentElement || document.body; 
    var pos = { 
     x: evt ? evt.pageX : window.event.clientX + doc.scrollLeft - doc.clientLeft, 
     y: evt ? evt.pageY : window.event.clientY + doc.scrollTop - doc.clientTop 
    }; 
    return pos; 

} 
document.onmousemove = moveMouse; 

function moveMouse(evt) { 
    var pos = getMousePos(evt), 
     cood = document.getElementById("showCood"); 
    cood.style.display = 'block'; 
    cood.style.left = pos.x + 50 + "px"; 
    cood.style.top = pos.y + 50 + "px"; 
    document.getElementById('posX').innerHTML = "X: " + pos.x; 
    document.getElementById('posY').innerHTML = "Y: " + pos.y; 

} 

$(document).mousemove(function(e) { 
    $("#jQueryPos").text(e.pageX + "," + e.pageY).show().css({ 
     'left': e.pageX - 50, 
     "top": e.pageY - 50 
    }) 
})