自定义指令directive，相关功能 代码如下：
<span style="font-size:18px;">var app = angular.module("app", []);
app.controller('ctrl',function($scope){
$scope.max = 5;
$scope.ratingVal = 2;
$scope.readonly = false;
$scope.onHover = function(val){
$scope.hoverVal = val;
};
$scope.onLeave = function(){
$scope.hoverVal = null;
}
$scope.onChange = function(val){
$scope.ratingVal = val;
}
});
app.directive('star', function () {
return {
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)">' +
'\u2605' +
'</li>' +
'</ul>',
scope: {
ratingValue: '=',
max: '=',
readonly: '@',
onHover: '=',
onLeave: '='
},
controller: function($scope){
$scope.ratingValue = $scope.ratingValue || 0;
$scope.max = $scope.max || 5;
$scope.click = function(val){
if ($scope.readonly && $scope.readonly === 'true') {
return;
}
$scope.ratingValue = val;
};
$scope.over = function(val){
$scope.onHover(val);
};
$scope.leave = function(){
$scope.onLeave();
}
},
link: function (scope, elem, attrs) {
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();
scope.$watch('ratingValue', function (oldVal, newVal) {
if (oldVal) {
updateStars();
}
});
scope.$watch('max', function (oldVal, newVal) {
if (newVal) {
updateStars();
}
});
}
};
});</span>样式css相关代码如下：
<span style="font-size:18px;">.rating {
color: #a9a9a9;
margin: 0;
padding: 0;
}
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: #ffee33;
}</span>html相关代码如下：
<span style="font-size:18px;"><div ng-app="app">
<div class="well" ng-controller="ctrl">
<div star rating-value="ratingVal" max="max" on-hover="onHover" on-leave="onLeave" readonly="{{readonly}}"></div>
<div>
Max: <input type="number" name="input" ng-model="max" min="0" max="99" required>
<p>current value: {{ratingVal}}</p>
<p>hover on : {{hoverVal?hoverVal:"none"}}</p>
<p>readonly : <input type="checkbox"
ng-model="readonly"></p>
</div>
</div>
</div></span>测试链接网址：
http://jsfiddle.net/shengoo/m17tkmj3/?utm_source=website&utm_medium=embed&utm_campaign=m17tkmj3
