AngularJS实现星星等级评分功能

angular.module('XXX').directive('stars', stars);

 function stars() {
  var directive = {
   restrict: 'AE',
   template: '
' +
    '
' +
    '' +
    '
' +
    '
',
   scope: {
    ratingValue: '=',
    hoverValue: '=',
    max: '=',
    onHover: '=',
    onLeave: '='
   },
   controller: startsController,

   link: function(scope, elem, attrs) {
    elem.css("display", "block");
    elem.css("text-align", "center");
    var updateStars = function() {
     scope.stars = [];
     for (var i = 0; i 

.rating {

 color: #a9a9a9;
 margin: 0;
 padding: 0; 
 text-align: center;

}
ul.rating {
 display: inline-block;

}
.rating li {
 list-style-type: none;
 display: inline-block;
 padding: 1px;
 text-align: center;
 font-weight: bold;
 cursor: pointer;
}

 

.rating .filled {
 color: #f00;
}
.rating .stars{

 font-size: 20px;

 margin-right: 5px;

}

  //星星等级评分
  $scope.max = 6;
  $scope.ratingVal = 6;
  $scope.hoverVal = 6;//我这需求是默认六个星全满(淡腾,反正也招不出神龙.因为还差一个.)一般的话，ratingVal和hoverVal都写0就可以了。
  $scope.OnHover= function(val) {
   $scope.hoverVal = val;
  };
  $scope.OnLeave= function() {
   $scope.hoverVal = $scope.ratingVal;
  }
  $scope.OnChange= function(val) {
   $scope.ratingVal = val;
  }

ratingVal:{{ratingVal}};

hoverVal:{{hoverVal}}

directive：
 scope: {
  readonly: '@'
 }
  function startsController($scope) {
   // var vm = this;
   $scope.click = function(val) {
    if ($scope.readonly) {
     return;
    }
    $scope.ratingValue = val;
   };
   $scope.over = function(val) {
    if ($scope.readonly) {
     return;
    }
    $scope.hoverValue = val;
   };

  }

controller:
 $scope.readOnly= false;

html:
 readOnly={{readonly}}.