我正在尝试将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，则数据为数字，请问有人在这里做错了吗？
最佳答案
<!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”设置为Element，以便您可以通过属性传递“ 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>