Sanjeev K Sanjeev K - 19 days ago 9
Javascript Question

jQuery Rateyo rating plugin integration with AngularJS

I am trying to integrate the Rateyo plugin with AngularJS and getting problem in defined rating value from directive, following are codes:

EDIT: Here is the working plunker

Controller

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


Directive

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


And this is the HTML code

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


Error in the console is Invalid Rating, expected value between 0 and 5

But if you see the API, the data is in number, can somebody please see what I am doing wrong here?

Answer

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

Make your directive "rateYo" as Element so you can pass value of "rating" through attribute and it can be accessed in directive scope.

Please make following changes to resolve your issue

In directive

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

In HTML replace

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

With

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