jQuery Rateyo 评级插件与 AngularJS 的集成答案

【问题标题】：jQuery Rateyo rating plugin integration with AngularJSjQuery Rateyo 评级插件与 AngularJS 的集成
【发布时间】：2016-11-18 04:51:04
【问题描述】：

我正在尝试将Rateyo plugin 与 AngularJS 集成，并在指令中定义的评级值中遇到问题，以下是代码：

编辑：这是工作的plunker

控制器

var app = angular.module('myApp', []);
app.controller('customersCtrl', function($scope, $http) {   
   $http.get("http://mynahcare.info/frontendapi/hospital_list")
   .then(function (response) {$scope.names = response.data.HospitalList;});  
});

指令

app.directive("rateYo", function() {
    return {
        restrict: "A",
        scope: {
            rating: "="
        },
        template: "<div id='rateYo'></div>",
        link: function( scope, ele, attrs ) {
            $(ele).rateYo({
                rating: String("{{scope.rating}}"),
                starWidth: "20px",      
                ratedFill: "#ffce59",
                readOnly: true          
            });
        }
    };
});

这是 HTML 代码

<li ng-repeat="y in names | limitTo: 6"> <a href="<?php echo $this->config->item('search_url');?>{{y.hosurl}}">
  <div class="hospital-card">
    <div class="hospital-card-img-holder">
      <div class="hospital-card-img" style="background-image:url({{y.profile_image}});"></div>
    </div>
    <h3 class="vlcc-name" title="{{y.clinic_title}}">{{y.clinic_name}}</h3>
    <!--Rating begin-->
    <div class="doc-rete">
      <div rate-yo class="mc-doc-rating"></div>
    </div>
    <!--Rating ends-->
    <p class="hospital-specialist">{{y.rating }} {{y.localty }} {{y.city }}</p>
    <p class="vlcc-experince">{{y.clinic_type }}</p>
    <p class="vlcc-address">{{y.hos_time }} </p>
  </div>
  </a>
</li>

控制台中的错误是 Invalid Rating，预期值在 0 到 5 之间

但是如果你看到 API，数据是数字的，有人可以看看我在这里做错了什么吗？

【问题讨论】：

你能把它当作一个工作的plunker吗？？你也想要完全一样的替代品！
@Arvind 我将很快分享 plunker/Jsfiddle 网址，我希望 Rateyo 能正常工作，但不介意它是否也可以替代
@Aravind 这里是工作插件：embed.plnkr.co/K8mItqe42jNvDPs3GjyV
尝试使用 .success 而不是 .then。
@Aravind 尝试了您的代码但无法正常工作，即使在 plunker 中，它也应该彩色星星，现在它的灰色开始

标签： javascript jquery angularjs angularjs-directive

【解决方案1】：

<!DOCTYPE html>
<html>

  <head>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css" />
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/rateYo/2.2.0/jquery.rateyo.min.css" />
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.14/angular.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/rateYo/2.2.0/jquery.rateyo.min.js"></script>
    <style>
.hospital_listing_front > ul > li{display: block; float:left; padding:0 10px; border-right:1px solid #ccc;}
.hospital_listing_front > ul > li > a{ text-decoration:none;}
.hospital_listing_front > ul > li > a:active, .hospital_listing_front > ul > li > a:hover { text-decoration:none;}
.doc-rete {float: left; width: 100%; text-align: center; padding: 20px 0;}
.hospital-card-img{width:100%; height:150px; float:left; padding:30px 0;}
.hospital-card-img > img{width:100px; height:100px; margin:0 auto; display:block;}
    </style>
  </head>

  <body>
    <div ng-app="myApp" ng-controller="customersCtrl">
      <div class="container-fluid section-hospital">
        <div class="container">
          <div class="row quiz-bmi">
            <div class="col-md-12">
              <h3>List data </h3>
              <div class="carousel hospital_listing_front">
                <ul class="slides">
                  <li ng-repeat="y in names | limitTo: 3">
                    <div class="hospital-card">
                      <div class="hospital-card-img-holder">
                        <div class="hospital-card-img">
                          <img src="{{y.profile_image}}" />
                        </div>
                      </div>
                      <h3 class="vlcc-name" title="{{y.clinic_title}}">{{y.clinic_name}}</h3>
                      <div class="doc-rete">
                        <rate-yo rating="y.rating" class="mc-doc-rating"></rate-yo>
                      </div>
                      <p class="hospital-specialist">{{y.rating }} {{y.localty }} {{y.city }}</p>
                      <p class="vlcc-experince">{{y.clinic_type }}</p>
                      <p class="vlcc-address">{{y.hos_time }} </p>
                    </div>
                  </li>
                </ul>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <script>
var app = angular.module('myApp', []);
app.controller('customersCtrl', function($scope, $http) {   
   $http.get("https://mynahcare.com/frontendapi/hospital_list")
   .then(function (response) {$scope.names = response.data.HospitalList;});  

});
app.directive("rateYo", function() {
return {
    restrict: "E",
    scope: {
        rating: "="
    },
    template: "<div id='rateYo'></div>",
    link: function( scope, ele, attrs ) {
        $(ele).rateYo({
            rating: scope.rating,
            starWidth: "20px",      
            ratedFill: "#ffce59",
            readOnly: true          
        });
    }
  };
});
    </script>
  </body>

</html>

将你的指令“rateYo”作为元素，这样你就可以通过属性传递“评级”的值，并且可以在指令范围内访问它。

请进行以下更改以解决您的问题

在指令中

app.directive("rateYo", function() {
return {
    restrict: "E",
    scope: {
        rating: "="
    },
    template: "<div id='rateYo'></div>",
    link: function( scope, ele, attrs ) {
        $(ele).rateYo({
            rating: scope.rating,
            starWidth: "20px",      
            ratedFill: "#ffce59",
            readOnly: true          
        });
    }
  };
});

在 HTML 中替换

<div rate-yo="" class="mc-doc-rating"></div>

与

<rate-yo rating="y.rating" class="mc-doc-rating"></rate-yo>

【讨论】：