Question

我正在尝试将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>

控制台出现错误评级无效，预期值介于0和5之间

但如果您看到API，数据的数量是多少，有人可以看看我在做错了吗？

Answer 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”作为元素，这样您就可以通过属性传递“rating”的值，并且可以在指令范围内访问它。

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

指令

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>

jQuery Rateyo评级插件与AngularJS集成

1 个答案: