自定义控制器directive代码如下：
app.directive('hgStarBox', function () {
return {
restrict:'ECAM',
template: '<div class="hg-score"><div class="hg-star-des" ng-transclude></div><span class="{{star.css}}" ng-repeat="star in stars" style="{{config}}" ng-click="clickStar({{$index}})" ></span></div>',
scope:{
startInfo:'=hgStarInfo'
},
replace:false,
transclude:true,
link: function (scope, elem, attrs) {
var itemName = attrs['name'];
if(itemName == undefined){
alert('必须添加name属性');
throw new Error("必须添加name属性");
}
this.styleFactory = {
new:function(){
return '';
},
addStyleItem:function(style,/*内部不能用"，请用'代替*/styleTtem){
return style+styleTtem;
}
}
this.dataFactory = {
default:{
max:5,
current:0,
callBack:null,
config:{
wh:'1em'
}
},
dataWithName:function(name){
var data = dataFactory.default;
var dataNew = scope.startInfo.item(name);
if(dataNew.hasOwnProperty('max')){
data.max = dataNew.max;
}
if(dataNew.hasOwnProperty('current')){
data.current = dataNew.current;
}
if(dataNew.hasOwnProperty('callBack')){
data.callBack = dataNew.callBack;
}
if(dataNew.hasOwnProperty('config')){
if(dataNew.config.hasOwnProperty('wh')){
data.config.wh = dataNew.config.wh;
}
}
return data;
}
};
scope.data = dataFactory.dataWithName(itemName);
var style = this.styleFactory.new();
style = this.styleFactory.addStyleItem(style,'width:'+ scope.data.config.wh+';');
style = this.styleFactory.addStyleItem(style,'height:'+ scope.data.config.wh+';');
scope.config = style;
this.showStar = function (who){
who.stars = [];
for (var i = 0; i < who.data.max; i++) {
who.stars.push({
css:(i < who.data.current?'hg-star':'hg-star-null')
});
}
};
scope.clickStar = function(index) {
if(scope.data.callBack == null)return;
scope.data.current = index+1;
showStar(scope);
scope.data.callBack(scope.data.current);
}
showStar(scope);
}
};
});样式css代码如下：
/*
*hg-star-box 指令样式
*/
.hg-score {
display: inline-block;
}
.hg-score .hg-star
{
display: inline-block;
width: 1em;
height: 1em;
background: url(../img/comm/star_full.png) no-repeat;
background-size: contain;
margin:4px 4px 0 0;
float: left;
}
.hg-score .hg-star-null
{
display: inline-block;
width: 1em;
height: 1em;
background: url(../img/comm/star_null.png) no-repeat;
background-size: contain;
margin: 4px 4px 0 0;
float: left;
}
.hg-score .hg-star-des
{
display: inline-block;
float: left;
}注：其中url里面是要引用的显示图片。
我的界面要求是这样的，引用是的html代码如下截图所示：
齐代码如下：
<ion-list>
<ion-item ng-repeat="cart in cart">
<div class="row">
<img class="col-20 hg-img-background" src="{{cart.goodsDirVO.cover}}"/>
<textarea name="evaluation" id="evaluation({{cart.goodsDirVO.id}})" class="col hg-magin-left-5"
ng-required="true" type="text" placeholder="评价~~~"></textarea>
</div>
<div class="row">
<div class="hg-img-parent">
<img class="hg-img-2em" src="img/information/camera.png" ng-click="chooseWayUp($index)"/>
</div>
<div class="hg-img-parent">
<button class="button-clear hg-text-vertical" ng-hide="isShow" ng-click="chooseWayUp($index)">上传照片</button>
</div>
<div ng-hide="!isShow" ng-repeat="img in imgList[$index]" class="row">
<img class="hg-img-5em" src="{{img}}"/>
<img class="hg-right" src="img/information/close2.png" ng-click="removePicture(img)"/>
</div>
</div>
<hg-star-box hg-star-info="starInfo" name="{{cart.goodsDirVO.id}}" ng-if="ctrlData.starDone">商品评价：
</hg-star-box>
</ion-item>
</ion-list>
<ion-item>
<hg-star-box hg-star-info="starInfo" name="logisticsStar" ng-if="ctrlData.starDone">物流评价：
</hg-star-box>
</br>
<hg-star-box hg-star-info="starInfo" name="serviceStar" ng-if="ctrlData.starDone">服务评价：
</hg-star-box>
</ion-item>具体的controller部分的代码如下：
$scope.ctrlData = {
starDone: false
};
$scope.initStarInfo = function () {
$scope.starInfo = {
item: function (name) {
if (name == 'logisticsStar') {
return {
callBack: function (vel) {
$rootScope.logistStar = vel;
console.log("$rootScope.logistStar:::" + $rootScope.logistStar);
}
};
} else if (name == 'serviceStar') {
return {
callBack: function (vel) {
$rootScope.serviceStar = vel;
console.log("$rootScope.serviceStar:::" + $rootScope.serviceStar);
}
};
} else {
return {
callBack: function (vel) {
console.log("name:::::"+name);
console.log("vel:::::"+vel);
for(var i = 0; i < $scope.goodIdList.length; i++){
if($scope.goodIdList[i] == name){
if($scope.productStarArray.length == 0){
$scope.product.name = name;
$scope.product.productStar = vel;
$rootScope.productStarArray.push( $scope.product);
}else if($scope.productStarArray.length >= $scope.goodIdList.length){
for(var f = 0; f < $scope.productStarArray.length; f++) {
if ($scope.productStarArray[f].name == name) {
$scope.productStarArray[f].name = name;
$scope.productStarArray[f].productStar = vel;
}
}
}else{
for(var j = 0; j < $rootScope.productStarArray.length; j++){
if( $rootScope.productStarArray[j].name == name){
$rootScope.productStarArray[j].name = name;
$rootScope.productStarArray[j].productStar = vel;
}else{
var object = {};
object.name = name;
object.productStar = vel;
var array = [];
array.push(object);
console.log("array:::"+angular.toJson(array));
$rootScope.productStarArray = $rootScope.productStarArray.concat(array)
}
}
}
}
}
}
};
}
}
};
$scope.ctrlData.starDone = true;
};
$scope.initStarInfo();以上只是个人做的时候用的，命名也是自己项目中用的，如有错的地方请见谅！
