自定義控制器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);

        }
        
    };
});
 

/*
 *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;
}
 

我的介面要求是這樣的，引用是的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();