ng-class conditional expression not working in directive template

Question

I have created a directive that gets two values from its controller. The ng-class is supposed to apply a class to the stars that are less or equal to the value. It is not doing as I expected.

Directive:

<star-rating-reviews 
    class="item-star-review"
    review-count="{{item.reviewCount}}"
    review-rate="{{item.rating}}"
    ng-show="item.rating && item.rating >= 3">
</star-rating-reviews>

Directive Template:

<div class="star" ng-repeat="star in [1,2,3,4,5] track by $index">
    <svg viewBox="0 0 24 24" preserveAspectRatio="xMidYMid meet"
        ng-class="{'accent-contrast-fill': star <= startCount}"
           class="accent-contrast-fill">
        <g class="style-scope iron-icon">
           <path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"></path>
        </g>
    </svg>
</div>
<div class="reviews">
  {{reviewCount}}
</div>

The ng-class is not adding the class to the appropriate stars.

Directive:

batman.directives.StarRatingReviews = function($timeout, typeUtils) {

     function link(scope, element, attributes, directiveCtrl) {
         $timeout(function() {
           if (scope.reviewRate && scope.reviewCount) {
             directiveCtrl.reviewCount = typeUtils.toNumberStrict(scope.reviewCount);
             directiveCtrl.starCount = typeUtils.toNumberStrict(scope.reviewRate);

        if (!isNaN(directiveCtrl.reviewCount) &&
            !isNaN(directiveCtrl.starCount) &&
            directiveCtrl.starCount >= NumConstants_.MIN_STAR_COUNT_REQUIRED &&
            directiveCtrl.reviewCount > NumConstants_.ZERO &&
            directiveCtrl.reviewCount < NumConstants_.EXCEEDING_VALUE) {

          directiveCtrl.setStarsAndReviews_();
          scope.reviewCount = directiveCtrl.reviewCount;
          scope.starCount = directiveCtrl.starCount;

        }
      }
    });
  }

  return {
    restrict: 'AE',
    controller: gpa.layouts.batman.controller.StarRatingReviewsCtrl,
    link: link,
    scope: {
      reviewCount: '@',
      reviewRate: '@',
      index: '@',
      check: '@'
    },
    templateUrl: 'template.html'
  };
};

startCount is being passed in from the attribute review-rate="{{item.rating}}" which comes from the main controller. The reason it is item.rating is because the developer has the option to pass in item.rating or item.reviewCount. The value is always a number between 1 to 5. Once the value is passed into the directive the directive does some check with a directive controller and stores the value in scope.starCount. So the value is always between 1 an 5. In case I was not clear review-rate="{{item.rating}}" is on the directive itself. — Aaron, Mar 25 '16 at 17:30
I apologize for the missing directive. I have to be careful how much code I am sharing because of company policies. — Aaron, Mar 25 '16 at 17:32
Gotcha...here's the problem: what you have **looks** like it should be working which means the issue is likely somewhere else. Unfortunately you can't share that "somewhere else" so attempting to help figure this out would be just making stuff up and guessing. — Lex, Mar 25 '16 at 17:35
I have added the directive. It is not done yet. The template has what it needs to render the stars as I set those values in scope.reviewCount = directiveCtrl.reviewCount; and scope.starCount = directiveCtrl.starCount; Is that more helpful? — Aaron, Mar 25 '16 at 17:46
So yeah...looks like a typo then. That's why I asked in my first comment where `startCount` was coming from. — Lex, Mar 25 '16 at 17:49

score 0 · Accepted Answer · answered Mar 25 '16 at 17:43

0

ng-class="{'accent-contrast-fill': star <= startCount}"

Should this be startCount or starCount? Maybe a typo.

answered Mar 25 '16 at 17:43

sebenalern

2,515
3
26
36

ng-class conditional expression not working in directive template

1 Answers1