AngularJS Example:
HTML
<div ng-app="app">
<div class="alert" report-mousemove="mousePos">
x:{{mousePos.x}}, y:{{mousePos.y}}
<a href="http://www.google.com/"><img src="http://ds.serving-sys.com/BurstingRes//Site-63660/Type-0/a847dfd0-a0e5-452b-b8e0-efb2aa56a9b3.jpg" /></a>
</div>
</div>
CSS
</style> <!-- Ugly Hack due to jsFiddle issue: http://goo.gl/BUfGZ -->
<link rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.6/angular.min.js"></script>
<style>
.done-true {
text-decoration: line-through;
color: grey;
}
JavaScript
var app = angular.module("app", []);
app.directive("reportMousemove", function ($compile) {
return {
terminal: true,
priority: 1,
transclude: true,
scope: {
position: "=reportMousemove"
},
link: function (scope, element, attrs) {
scope.position = {x:0, y:0};
scope.update = function (event) {
scope.position = {x: event.x, y: event.y};
}
attrs.$set("ng-click", "update($event)");
$compile(element, null, 1)(scope);
},
controller: function ($element, $transclude) {
$transclude(function (clone) {
$element.append(clone);
});
}
}
})