AngularJS Example

HTML

<script src="http://code.angularjs.org/1.0.0rc10/angular-1.0.0rc10.js"></script>
<div ng-app="MyApp">
    <div ng-controller="MyController">
        <priority ng-prio="stars" on-click="hoi()" ng-style="clickable" ></priority>
        stars {{stars}}
    </div>
</div>

CSS

.prio i {
  width:24px;
  height:24px;
  background-image: url(/img/stars.png);
  display:inline-block;
  background-position: -24px 0; }
.prio i.chosen { background-position: 0 0; }
.prio .clickable {
  cursor: pointer;
}
/*.prio:hover i { background-position: -24px 0; }
.prio:hover i.hoverChosen { background-position: 0 0; }*/
[ng\:cloak], [ng-cloak], .ng-cloak {
  display: none;
}

JavaScript

var myApp = angular.module('MyApp',[])
myApp.directive('priority', function($templateCache, $document, $compile) {
    return {
      restrict: 'E',
      //    transclude: true,
      replace: true,
      scope: {
        ngPrio: 'accessor',
        ngStyle: 'attribute',
    onClick: "expression"        
      },
      template: '<span class="prio">'+
    '<i x-ng-repeat="nb in [1,2,3,4,5]" class="{{ngStyle}} {{isChosen(nb)}}" x-ng-click="chooseValue(nb)"> *'+
    '</i>{{ngPrio}}',

      controller: function($scope, $element, $attrs, $location) {
        $scope.isChosen = function(value) {
          if($scope.ngPrio() >= value) return "chosen";
        };
        $scope.chooseValue = function(val) {
          if($scope.ngStyle === 'clickable')
          {
            if ($scope.ngPrio() == val)
              $scope.ngPrio(val-1);
            else
              $scope.ngPrio(val);
          }
          $scope.onClick();
        };
      }
    }
          });