结合Angular指令,特别是自定义指令和ng-mousemove

时间:2014-01-29 03:55:44

标签: angularjs

好的,这是一个非常基本的问题。 我想要的是一个带有模板的canvas标签的指令,以及相对于画布提供鼠标/触摸坐标的事件。我可以在链接函数中使用jquery,但是每个人似乎都认为这是作弊。我知道我对于角度指令在同一个元素上如何相互影响以及对图像的理解并不清楚。

1 个答案:

答案 0 :(得分:1)

好的,我会捅它。如果这不是您所追求的,请澄清。

以下是一个原始指令,它编译成一个画布,并处理鼠标移动和鼠标点击事件。

该指令如下:

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

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

  }
 };    
});

模板如下:

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

在行动here中查看。希望这会有所帮助...