AngularJS Live Example
HTML
<script src="http://code.angularjs.org/angular-0.9.19.min.js"></script>
<script src="http://code.angularjs.org/angular-0.9.19.min.js" ng:autobind></script>
<div ng:click="count = count+1" my:mouseover="count = count + 1" ng:init="count=0">
Increment
</div>
count: {{count}}
CSS
body { font-family: Arial,Helvetica,sans-serif; }
body, td, th { font-size: 14px; margin: 0; }
table { border-collapse: separate; border-spacing: 2px; display: table; margin-bottom: 0; margin-top: 0; -moz-box-sizing: border-box; text-indent: 0; }
a:link, a:visited, a:hover { color: #5D6DB6; text-decoration: none; }
JavaScript
angular.directive('my:mouseover', function(expression, compiledElement) {
var compiler = this;
compiler.descend(true);
compiler.directives(true);
return function(linkElement){
var self = this;
linkElement.mouseenter(function(event){
self.$tryEval(expression);
self.$eval();
event.stopPropagation();
});
};
});
angular.directive('my:mouseout', function(expression, compiledElement) {
return function(linkElement){
var self = this;
linkElement.mouseleave(function(event){
self.$tryEval(expression);
event.stopPropagation();
});
};
});