Я столкнулся с проблемой, когда я написал специальную директиву для оценки со звездами, где пользователь может оценивать от 1 до 5, щелкнув по звездам, я добился успеха в этом.
<span starrating class="star-rating" rating="ratedValue" ></span>
Но я использую ту же директиву, чтобы отображать отзывы клиентов, где у меня есть изолированная переменная области, называемая "рейтинг", и это тоже хорошо работает.
<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;
}
}
}
};
});
Вы должны использовать read-only-flag="true"
чтобы получить значение в вашей директиве. Обратите внимание на тире в атрибуте.
Изолированные области camelCase разбиты по атрибутам.
Пожалуйста, ознакомьтесь с демонстрацией ниже или в этой скрипке.
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>