10.7 Widget w/mouseover & mouseout

Working widget with mouseover and mouseout :)

by danielzen

HTML

<script src="http://ci.angularjs.org/job/angular.js-angular-master/232/artifact/build/pkg/0.10.7-64912069/angular-0.10.7-64912069.js"></script>
<div ng:app="myModule">
<div ng:controller="StateCtrl">
    <ul>
          <li ng:repeat="state in states | filter:trueFilter" ng:click="state.selected=!state.selected" ng:mouseenter="state.over=true" ng:mouseleave="state.over=false">  
        <my:state state="state"></my:state>
          </li>
        </ul>
<hr/>
Debug: {{states}}
</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;
}
    
StateList.prototype = new Array();
StateList.prototype.constructor = StateList;
function StateList(name, array) {
  this.name = name;
  if (typeof array != 'undefined') {
    for (var i = 0; i < array.length; i++) {
      var item = array[i];
      this.push(item);
    }
  }
}

function StateCtrl($scope) {
    $scope.myState = new MyState();
    $scope.myState.selected = true;
    $scope.states = new StateList("my list",
[new MyState(), new MyState(), new MyState()]);
    $scope.trueFilter = function () {
    return true;
  }
}

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

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