CODEWITHSUNDEEP
angularjs
Weavermount
Weavermount

Reputation: 746

Combining Angular directives, specifically a custom directive with ng-mousemove

Ok this is a very basic question. What I want is a directive with a canvas tag for a template, and events giving mouse/touch coordinates relative to the canvas. I could just use jquery in the linking function, but everyone seems to think that's cheating. I know I don't have a crisp understanding of how angular directives play with each other on the same element, and image that would help a lot.

Upvotes: 0

Views: 1221

Answers (1)

Joel Skrepnek
Joel Skrepnek

Reputation: 1661

Ok, I'll take a stab at it. If this isn't what you're after, please clarify.

What follows is a primitive directive that compiles into a canvas, and handle mouse move and mouse click events.

The directive looks like:

app.directive('myCanvas', function () {

return {
  replace: true,
  restrict: 'E',
  templateUrl: 'my-canvas-template.html',
  link: function (scope, elem, attr) {

  }
 };    
});

The template looks like:

<div>
<canvas style="border:1px solid #000000;width:'400px';height:'400px" ng-mousemove="moved = moved + 1" ng-click="clicked = clicked + 1">
</canvas>
<p>Mouse moves: {{ moved }}</p>
<p>Mouse clicks: {{ clicked }}</p>
</div>

See it in action here. Hope this helps ...

Upvotes: 1

Related Questions