Angular：获取表格行的坐标

Question

我想在Angular 1.5的表行旁边放一个工具提示，类似于这样：Getting HTML table row position and showing div next to it（但这是jQuery）

我试图将表格行元素传递给控制器​​函数，但似乎无法访问该元素。

我试过了：

模板摘录：

<tbody>
    <tr ng-repeat="s in sessions"
            ng-mouseover="showPopup(this)"
            ...

Javascript片段：

        $scope.showPopup = function($event) {
            console.log(angular.element(this)); // [p]
            console.log(angular.element(this).prop('offsetLeft')); // undefined
            console.log($event.target); // undefined
        console.log(angular.element($event.target).prop('offsetLeft')); // undefined

如何获取表格行的实际坐标？

上面[p]的{​​{1}}看起来像：

Answer 1

为此，我建议ui-bootstrap很容易处理工具提示：

https://angular-ui.github.io/bootstrap/

但是如果你不想使用它，你可以在table元素上使用这样的东西。

HTML中的

：

<table ng-mouseover="getInfo($event)">

并在JS中使用：

     $scope.getInfo= function(event) {
      $scope.currentPosition = `${event.srcElement.offsetTop}/${event.srcElement.offsetLeft}`;
      console.log(event);
     }

然后您将可以访问函数中的event。 event将包含srcElement，这是您悬停的元素。 在示例中，我获得了offsetTop和offsetLeft，但您可能会使用其他内容。

这是一个例子：

https://jsfiddle.net/ng1mn8qp/5/

Answer 2

您可以为ng-repeat添加track by属性。像ng-repeat="s in sessions track by $index"之类的东西，$index变量是当前索引，因此您可以使用它来搜索表行并获取正确的行。