Question

当用户将鼠标悬停在星空上时，我想显示消息You rated {{rate1}} star.<a ng-click="showMe()" class="modifyIt"> modify?</a>，如果用户点击了我要显示的评分，则感谢您评分＆＃39; （请参阅下面的html以了解我的逻辑）。但在此之后，如果用户再次悬停在星星上，我想再次显示You rated {{rate1}} star.<a ng-click="showMe()" class="modifyIt"> modify?</a>。

问题曾经被评定过，它显示了“感谢评分＆＃39;总是。如何解决这个问题？

请看下面我尝试这样做，如果有人能指出我所犯的错误会有所帮助。谢谢！

<div class="user">

  <uib-rating ng-model="rate" max="5" read-only="isReadonly" on-titles="['one','two','three']" aria-labelledby="default-rating" class="readOnlyRating "></uib-rating>


  <div  class=" arrow_box rt" ng-show="showRatings">
    <div class="ratingName">
      <h5><b>Give your rating here..</b></h5>
    </div>
    <div class="stars">
      <uib-rating ng-model="rate1" ng-click="rating(rate1)" max="5" read-only="isReadonly1" on-hover="hoveringOver(value)" on-leave="overStar = null" titles="['one','two','three']" aria-labelledby="default-rating" class="readOnlyRating "></uib-rating>
    </div>
  </div>
  <div ng-mouseleave="hoverOut()" class="arrow_box rt" ng-show="ratevalue ">
    <h5 class="ratedPopover"> Thanks for rating </h5>
  </div>

  <div class="arrow_box rt" ng-hide="showRatings">
    <h5 class="ratedPopover">You rated <b>{{rate1}} star.</b><a ng-click="showMe()" class="modifyIt"><b  > modify?</b></a>
  </h5>
  </div>

</div>

这是我的指令文件

scope.rating = function (rate) {

    scope.ratevalue = rate;
    if ($localStorage[localStorageRatingKey] == undefined) {
        previousRatingValue = 0;
        $localStorage[localStorageRatingKey] = scope.ratevalue;
    } else {
        previousRatingValue = $localStorage[localStorageRatingKey];
        $localStorage[localStorageRatingKey] = scope.ratevalue;
    }

    ratingService.update({
        companyId : scope.details._id,
        userRating : scope.ratevalue,
        previousRatingValue : previousRatingValue
    }, scope.details, successCallback, errorCallback);

    function successCallback(res) {
        // console.log("coming from callback");
        scope.rate = res.avgRatings;
        scope.reviewsCount = res.totalRatingsCount;
    }

    function errorCallback(res) {
        NotificationFactory.error('Failed to update the product rating...', res.data.message);
    }

};

scope.showMe = function () {
    scope.showRatings = !scope.showRatings;
    console.log("showme :" + scope.showRatings);
}

scope.hoverOut = function () {
    if ($localStorage[localStorageRatingKey]) {
        scope.showRatings = !scope.showRatings;
    } else {
        scope.showRatings = true;
    }
    console.log("hoverOut ShowRatings:" + scope.showRatings);
}

if ($localStorage[localStorageRatingKey]) {
    scope.showRatings = false;
} else {
    scope.showRatings = true;
}

Answer 1

我建议您使用hasjustRated之类的标记，而不是使用ratevalue来显示消息“感谢评分”。在您的代码中将其初始化为false

在此函数定义的开头：scope.rating = function (rate) { ... }

同样在成功回调结束时，添加以下行：

scope.hasjustRated = true;

然后在离开悬停时，将此值重置为false。我建议在休假时添加一个明确的函数，以便在离开时执行所有必要的步骤。

showMe函数的功能还有点不清楚。

如果一个条件设置为true并且左边的ng-show为false，如何处理angularjs中的多个ng-show和一个ng-hide

这是我的指令文件

1 个答案: