Widget w/mouseover & mouseout

Working widget with mouseover and mouseout :)

HTML

<div ng-app="myModule">
<div ng-controller="StateCtrl">
    <div ng-click="myState.selected=!myState.selected" ng-mouseenter="myState.over=true" ng-mouseleave="myState.over=false">      
        <div my-state="myState"></div>
     </div>
<hr/>
Debug: {{myState}}
</div>
</div>
<hr/>

CSS

</style>
<script src="http://ci.angularjs.org/job/angular.js-angular-master/ws/build/angular.js"></script>
<script src="https://raw.github.com/pivotal/jasmine/master/lib/jasmine-core/jasmine.js"></script>
<script src="https://raw.github.com/pivotal/jasmine/master/lib/jasmine-core/jasmine-html.js"></script>
<script src="http://ci.angularjs.org/job/angular.js-angular-master/232/artifact/build/pkg/0.10.7-64912069/angular-mocks-0.10.7-64912069.js"></script>
<link rel="stylesheet" type="text/css" href="http://tryjasmine.com/js/vendor/jasmine-1.1.0/jasmine.css">
<style>

JavaScript

function StateCtrl($scope) {
    $scope.myState = {
        over: false,
        selected: true
    };
}

describe('state', function() {
    var scope;

    beforeEach(inject(function($rootScope, $controller) {
        scope = $rootScope.$new();
        var ctrl = $controller(StateCtrl, {$scope: scope});
    }));

    it('should have over and selected', function() {
        expect(scope.myState.over).toBe(false);
        expect(scope.myState.selected).toBe(true);
    });
});

angular.module("myModule", []).directive('myState', function($compile) {
    return {
        replace: true,
        restrict: 'A',
        scope: {
            myState: 'accessor'
        },
        template: '<span>{{selected()}}{{over()}}</span>',
        link: function(scope, element, attrs) {
            scope.selected = function() {
                return scope.myState().selected ? 'S' : 's';
            };

            scope.over = function() {
                return scope.myState().over ? 'O' : 'o';
            };
        }
    }
});

describe('widgets', function() {
    var directiveScope, element, compile;
   
    beforeEach(module('myModule'));

    it('myState', inject(function($rootScope, $compile) {
        directiveScope = $rootScope.$new();
        element = $compile('<div my-state="myState"></div>')(directiveScope);
        $rootScope.myState = {
            over: false,
            selected: true
        };
        directiveScope.$apply();
        expect(element.text()).toBe("So");
    }));
});

(function() {
    var jasmineEnv = jasmine.getEnv();
    jasmineEnv.updateInterval = 1000;

    var trivialReporter = new jasmine.TrivialReporter();
    jasmineEnv.addReporter(trivialReporter);

    jasmineEnv.specFilter = function(spec) {
        return trivialReporter.specFilter(spec);
    };

    $(function() {
        jasmineEnv.execute();
    });
})();