Trying to translate something I had working without angular to work with angular, and it seems I understand angular less clearly than I thought:

I have a number of static divs and one movable div that follows the mouse. If the user clicks while the movable div is overlapping a static div, it triggers an event (currently a Bootstrap modal). Currently, it also calculates the distance of the mouse and the static divs and changes the background color based on distance (i.e. closer to the red div, background is brighter red, closer to blue div, background brighter blue, between the two, the colors fade/blend from red to purple to blue, etc).

Currently, I am just trying to capture mouse position when the mouse moves. The next object is to find the centerpoint of each static div.

Trying to translate something I had working without angular to work with angular, and it seems I understand angular less clearly than I thought:

I have a number of static divs and one movable div that follows the mouse. If the user clicks while the movable div is overlapping a static div, it triggers an event (currently a Bootstrap modal). Currently, it also calculates the distance of the mouse and the static divs and changes the background color based on distance (i.e. closer to the red div, background is brighter red, closer to blue div, background brighter blue, between the two, the colors fade/blend from red to purple to blue, etc).

Currently, I am just trying to capture mouse position when the mouse moves. The next object is to find the centerpoint of each static div.

• javascript
• jquery
• html
• angularjs
• angularjs-scope

2 Answers 2

You can use the ng-mousemove directive and pass the mouse event to your angular controller.

See this plnkr for an example.

View

<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;
   }

In tandem with the ng-mousemove directive, you can pass the $event object to your controller function and grab x and y coordinates off of there.

Maybe something like:

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

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

Benefit of using directive is that its reusable.