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

  function stars() {
    var directive = {
      restrict: 'AE',
      template: '<ul class="rating" ng-mouseleave="leave()">' +
        '<li ng-repeat="star in stars" ng-class="star" ng-click="click($index + 1)" ng-mouseover="over($index + 1)">' +
        '<i class="glyphicon glyphicon-star stars"></i>' +
        '</li>' +
        '</ul>',
      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 < scope.max; i++) {
            scope.stars.push({
              filled: i < scope.ratingValue
            });
          }
        };
        updateStars();

        var updateStarsHover = function() {
          scope.stars = [];
          for (var i = 0; i < scope.max; i++) {
            scope.stars.push({
              filled: i < scope.hoverValue
            });
          }
        };
        updateStarsHover();

        scope.$watch('ratingValue', function(oldVal, newVal) {
          if (newVal) {
            updateStars();
          }
        });
        scope.$watch('hoverValue', function(oldVal, newVal) {
          if (newVal) {
            updateStarsHover();
          }
        });
      }


    };

    return directive;

    /** @ngInject */
    function startsController($scope) {
      // var vm = this;
      $scope.click = function(val) {
        $scope.ratingValue = val;
      };
      $scope.over = function(val) {
        $scope.hoverValue = val;
      };
      $scope.leave = function() {
        $scope.onLeave();
      }

    }
  }

.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;
    }

<stars rating-value="ratingVal" hover-value="hoverVal" max="max" on-hover="onHover" on-leave="onLeave"></stars>
ratingVal:{{ratingVal}};<br/>
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}}.