Angularjs ng类条件表达式在指令模板中不起作用
我创建了一个指令,该指令从其控制器获取两个值。ng类应该对小于或等于该值的恒星应用一个类。它没有像我预期的那样做 指令:Angularjs ng类条件表达式在指令模板中不起作用,angularjs,using-directives,Angularjs,Using Directives,我创建了一个指令,该指令从其控制器获取两个值。ng类应该对小于或等于该值的恒星应用一个类。它没有像我预期的那样做 指令: <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
class="item-star-review"
review-count="{{item.reviewCount}}"
review-rate="{{item.rating}}"
ng-show="item.rating && item.rating >= 3">
</star-rating-reviews>
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'
};
};
指令模板:
<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>
{{reviewCount}}
ng类没有将该类添加到相应的星号
指令:
<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>
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'
};
};
batman.directions.StarRatingReviews=函数($timeout,typeUtils){
函数链接(范围、元素、属性、方向Ctrl){
$timeout(函数(){
if(scope.reviewRate和scope.reviewCount){
directiveCtrl.reviewCount=typeUtils.toNumberStrict(scope.reviewCount);
directiveCtrl.starCount=typeUtils.toNumberStrict(scope.reviewRate);
如果(!isNaN(directiveCtrl.reviewCount)&&
!isNaN(directiveCtrl.starCount)&&
directiveCtrl.starCount>=NumConstants\uu.MIN\u STAR\u COUNT\u必需&&
directiveCtrl.reviewCount>NumConstants\uu0&&
directiveCtrl.reviewCount
ng class=“{'accent-contrast-fill':start帐户从哪里来以及它的值是什么?start帐户是从属性review rate=“{{item.rating}”传入的"它来自主控制器。之所以是item.rating,是因为开发人员可以选择传入item.rating或item.reviewCount。该值始终为1到5之间的数字。一旦该值传入指令,该指令将与指令控制器进行一些检查,并将该值存储在scope.starCount中。因此值始终介于1和5之间。如果我不清楚,请查看比率=“{item.rating}”是在指令本身上。我为丢失的指令道歉。由于公司政策,我必须小心我共享了多少代码。明白了…问题是:您所拥有的看起来应该可以工作,这意味着问题可能在其他地方。不幸的是,您不能在“其他地方”共享该问题因此,试图帮助解决这一问题只不过是编造和猜测。我已经添加了指令。它还没有完成。当我在scope.reviewCount=directiveCtrl.reviewCount;和scope.starCount=directiveCtrl.starCount;中设置这些值时,模板具有呈现星星所需的功能,这更有帮助吗?