Angularjs : Loop all isolated scope Directive Templates, on click of one - angularjs

Question

I have html:
<div ng-repeat="mydata in data" class="ng-scope ng-binding">
<p class="ng-binding">{{mydata.postdata}}</p>
<div my-rating rating-value="rating" data-cat="post" data-id="mydata.id" ></div>
<div ng-repeat="childData in mydata.personRelatedData">
{{childData.personName}}
<div my-rating rating-value="rating" data-cat="person" data-id="childData .id" >
</div>
</div>
I have a Directive :
myDirectives.directive('myRating', function () {
return {
restrict: 'A',
template: '<div><ul>' +
'<li ng-repeat="i in getNumber(myNumber)" ng-click="toggle($index)" id=$index>' +
'<div ng-switch="switchPoint<$index">'+
'<div ng-switch-when=true><img ng-src="img/{{Unrated}}"></div>'+
'<div ng-switch-when=false><img ng-src="img/{{Rated}}"></div>'+
' </div>' +
'</li></ul></div>',
scope: {
ratingValue: '=',
dataCat: '=',
dataId: '=',
readonly: '#',
onRatingSelected: '&'
},
link: function (scope, elem, attrs) {
scope.toggle= function(val) {
scope.ratingValue = val + 1;
scope.onRatingSelected({rating: null});
scope.switchPoint = val;
}
}
}
Currently i have implemented that on page load, the rating from the db comes, and while rendering the template, if rating for that ID exists, then it is rated on the isolated rating template too.
Now what I want is that on click of a rating, the execution should rate that ID celebrity, but also loop the other isolated templates, to see if ratings for that ID exist.. and if so, we can update their rating too.
How can I loop the other isolated templates on click of one?

Answer 1

Don't store the rating value in the scope of the directive, store the rating in a location that is accessible to all of the items.
mydata is a perfect location for this. Instead of passing the mydata.rating property directly to the directive (and thus passing a value), pass the whole mydata object, and reference the mydata.rating property within the directive. Since you're passing an object to the directive, it will be a reference, not a value, i.e. all of the directives which are passed the same mydata object will be looking at the same object, not copies of a particular property. You could achieve the same goal by making the rating property an object as well instead of a value.
EDIT: in response to comments, you could change it to be more direct.
myDirectives.directive('myRating', function () {
return {
restrict: 'A',
template: '<div><ul>' +
'<li ng-click="setRating(1)">' +
' <img ng-src="img/{{ myData.rating >= 1 ? Unrated : Rated}}">' +
'</li>' +
'<li ng-click="setRating(2)">' +
' <img ng-src="img/{{ myData.rating >= 2 ? Unrated : Rated}}">' +
'</li>' +
'<li ng-click="setRating(3)">' +
' <img ng-src="img/{{ myData.rating >= 3 ? Unrated : Rated}}">' +
'</li>' +
'<li ng-click="setRating(4)">' +
' <img ng-src="img/{{ myData.rating >= 4 ? Unrated : Rated}}">' +
'</li>' +
'<li ng-click="setRating(5)">' +
' <img ng-src="img/{{ myData.rating >= 5 ? Unrated : Rated}}">' +
'</li>' +
'</ul></div>',
scope: {
myData: '=',
readonly: '#',
onRatingSelected: '&'
},
link: function (scope, elem, attrs) {
scope.setRating = function(val) {
scope.myData.rating = val;
scope.onRatingSelected(scope.myData);
}
}
}
I don't expect this example to work with just copy/paste to your problem; it's just meant as an idea to get your rolling.