javascript - AngularJS - 如何在 mousemove 上存储鼠标坐标？

Question

试图将我在没有 angular 的情况下工作的东西翻译成用 angular 工作，但似乎我对 angular 的理解不如我想象的那么清楚:

我有许多静态 div 和一个跟随鼠标的可移动 div。如果用户在可移动 div 与静态 div 重叠时单击，则会触发一个事件(当前为 Bootstrap 模态)。目前，它还会计算鼠标和静态 div 的距离，并根据距离改变背景颜色(即越靠近红色 div，背景越亮红色，越靠近蓝色 div，背景越亮蓝色，介于两者之间，颜色从红色到紫色到蓝色等褪色/混合)。

目前，我只是想在鼠标移动时捕捉鼠标位置。 下一个目标是找到每个静态 div 的中心点。

Answer 1

您可以使用 ng-mousemove指令并将鼠标事件传递给 Angular Controller 。

查看此 plnkr举个例子。

查看

<div class="big" ng-controller="TestCtrl" ng-mousemove="captureCoordinate($event)">
    <div>x: {{x}}</div>
    <div>y: {{y}}</div>
</div>

Controller

   $scope.captureCoordinate = function($event){
      $scope.x = $event.x;
      $scope.y = $event.y;
   }

与 ng-mousemove 指令一起，您可以将 $event 对象传递给您的 Controller 函数并从那里获取 x 和 y 坐标。