Question

尝试翻译我没有角度工作的东西用角度工作，似乎我理解角度不如我想象的那么清晰：

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

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

Answer 1

您可以使用ng-mousemove指令并将鼠标事件传递给角度控制器。

有关示例，请参阅此plnkr。

查看

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

<强>控制器

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

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

Answer 2

可能是这样的：

angular.directive('mouseMoveDirective', mouseMoveDirective);
function mouseMoveDirective() {
  return {
    link: link
  }

  function link(scope, element, attrs) {
    $(element).mousemove(function(e) {
      var pageCoords = (e.pageX + ":" + e.pageY);
    })
  }
}

使用指令的好处是它的可重用性。

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

2 个答案: