AngularJS mouseenter directive

by cambiata

HTML

<script src="http://code.angularjs.org/0.9.18/angular-0.9.18.js#autobind"></script>
<div ng:controller='MyCntrl'>
<ul >
    <li my:mouseenter='doMouseEnter(item)' ng:repeat="item in items">
        list element #1 mouseenter counter: 
    </li>
</ul>
{{cnt}}
</div>

JavaScript

angular.directive('my:mouseenter', function(expression, compiledElement) {
    var compiler = this;
    return function(linkElement) {
        var scope = this;
        linkElement.bind('mouseenter', function(event) {
            scope.$tryEval(expression, linkElement);
            scope.$service('$updateView')();
            event.stopPropagation();
        });
    };
});

function MyCntrl() {
    var self = this;
    this.cnt = 0;
    this.items = ['a', 'b', 'c'];
    this.doMouseEnter = function(item) {
        self.cnt = item;
    }
}