Question

我创建了一个从其控制器获取两个值的指令。 ng-class应该将类应用于小于或等于该值的星。它并没有像我预期的那样。

指令：

<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>

指令模板：

<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>

ng-class不会将类添加到适当的星星中。

指令：

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'
  };
};

Answer 1

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

这应该是startCount还是starCount？也许是一个错字。

ng-class条件表达式在指令模板中不起作用

1 个答案: