angularjs，无法在自定义指令中为多个属性赋值答案

【问题标题】：angularjs, unable to assign values to multiple attributes in custom directiveangularjs，无法在自定义指令中为多个属性赋值
【发布时间】：2016-04-21 19:40:19
【问题描述】：

我遇到了一个问题，我编写了一个自定义指令来用星星评分，用户可以通过点击星星从 1 到 5 进行评分，我成功地实现了这一点。

<span starrating class="star-rating" rating="ratedValue" ></span>

但是我使用相同的指令来显示客户评论，其中我有一个名为“rating”的独立范围变量，这也很有效。

<span starrating class="star-rating" readOnlyFlag="true" rating="reviewItem.rating" ></span>

但这一次我不希望用户点击并更改评级。因此，我在指令的隔离范围内声明另一个变量，称为“readOnlyFlag”。但是当我在指令中将 readOnlyFlag 的值分配为属性时。我无法在链接函数中获取值。

指令代码如下：

angular.module("pageDirectives",[]).directive("starrating", function(){
    return {
        restrict : 'A',
        template :'<ul class="list-inline">'
    + ' <li ng-repeat="star in stars" ng-class="{filled: $index<=selectedIndex, filled:$index<rating}" ng-click="toggleIndex($index)">'
        + '  <i class="glyphicon glyphicon-star fa-2x"></i>'
        + ' </li>'
        + '</ul>',
        scope : {
            rating : '=',
            readOnlyFlag : '=',

    },
        link: function (scope) {
            scope.stars=[1,2,3,4,5];
            scope.toggleIndex= function(index){
                if(!scope.readonlyFlag){
                    scope.selectedIndex=index;
                    scope.rating=index+1;
                }

            }
        }
};
});

【问题讨论】：

标签： angularjs angularjs-scope angular2-directives

【解决方案1】：

您应该使用read-only-flag="true" 将值放入您的指令中。请注意属性中的破折号。

孤立的范围camelCase在属性中用虚线表示。

请看下面的演示或fiddle。

angular.module('demoApp', [])
.controller('mainController', function($scope) {
	$scope.readOnly = false;
	$scope.reviewItem = {
    	rating: 3
    };
})
.directive("starrating", function(){
    return {
        restrict : 'A',
        template :'<ul class="list-inline">'
    + ' <li ng-repeat="star in stars" ng-class="{filled: $index<=selectedIndex, filled:$index<rating}" ng-click="toggleIndex($index)">'
        + '  <i class="glyphicon glyphicon-star fa-2x"></i>'
        + ' </li>'
        + '</ul>',
        scope : {
            rating : '=',
            readOnlyFlag : '=',

    },
        link: function (scope) {
            scope.stars=[1,2,3,4,5];
            scope.toggleIndex= function(index){
            	console.log(scope.readOnlyFlag)
                if(!scope.readOnlyFlag){
                    scope.selectedIndex=index;
                    scope.rating=index+1;
                }

            }
        }
};
});

.filled  {
    color: red
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css" rel="stylesheet"/>
<div ng-app="demoApp" ng-controller="mainController">
    toggle read-only <input ng-model="readOnly" type="checkbox"/>
    <span starrating class="star-rating" read-only-flag="readOnly" rating="rating" ></span>
    <h2>
    always read-only
    </h2>
 <span starrating class="star-rating" read-only-flag="true" rating="reviewItem.rating" ></span>
</div>

【讨论】：