Widget w/mouseover & mouseout

Working widget with mouseover and mouseout :)

by robertjd

HTML

<script src="http://docs-next.angularjs.org/angular-0.10.6.min.js"></script>
<div ng:app ng:controller="StateCtrl">
    <div>
        <ul>
          <li ng:repeat="state in states" ng:click="state.selected=!state.selected" my:mouseover="state.over=true" my:mouseout="state.over=false">  
        <my:state state="state"></my:state>
          </li>
        </ul>
    </div>
</div>

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

var MyState = function() {
    this.over = false;
    this.selected = false;
}

function StateCtrl() {
    this.states = [new MyState(), new MyState(), new MyState()];
    this.myState = new MyState();
    this.myState.selected = true;
}

angular.widget('my:state', function(elements, compileElement) {
    return function(linkElement) {
        var self=this;
        var stateExp = linkElement.attr('state');
        self.$watch(stateExp, function(scope, newValue) {
            var state = self.$eval(stateExp);
            var render = (state.selected ? "S" : "s") + (state.over ? "O" : "o");
            linkElement.html(render);
        });
    }
});

angular.directive('my:mouseover', function(expression, compiledElement) {
    var compiler = this;
    compiler.descend(true);
    compiler.directives(true);
    return function(linkElement) {
        var scope = this;
        linkElement.mouseenter(function(event) {
            scope.$apply(function() {
                scope.$eval(expression);
            });
            event.stopPropagation();
        });
    };
});
angular.directive('my:mouseout', function(expression, compiledElement) {
    return function(linkElement) {
        var scope = this;
        linkElement.mouseleave(function(event) {
            scope.$apply(function() {
                scope.$eval(expression);
            });
            event.stopPropagation();
        });
    };
});