我有一个场景,我需要根据悬停值更改星形颜色 附加颜色我使用自定义指令和显示星我使用ui-rating(ui-bootstrap)
HTML:
<uib-rating ng-model="rate" class="col-xs-3 star-color" max="max" read-only="isReadonly" on-hover="rating=value;hoveringOver(value)" star-color rating="rating" ng-click="viewPage||fnPutRating(rating)" on-leave="overStar = null" titles="['one','two','three']" aria-labelledby="default-rating"></uib-rating>
此处star-color
是自定义指令
指令:
angular.module('hrPortalApp')
.directive('starColor', function() {
return {
restrict: 'A',
scope: {
rating: "="
},
link: function(scope, elem, attr) {
console.log($scope.rating);
switch (todoText) {
case "1":
elem.style.color='red'
break;
case "2":
elem.style.color='red'
break;
case "3":
elem.style.color='green'
break;
case "4":
elem.style.color='green'
break;
case "5":
elem.style.color='green'
break;
}
}
};
});
但在这里我收到错误
angular.js:13642 Error: [$compile:multidir] Multiple directives [starColor (module: hrPortalApp), uibRating (module: ui.bootstrap.rating)] asking for new/isolated scope on: <span ng-mouseleave="reset()" ng-keydown="onKeydown($event)" tabindex="0" role="slider" aria-valuemin="0" aria-valuemax="{{range.length}}" aria-valuenow="{{value}}" aria-valuetext="{{title}}" ng-model="rate" class="col-xs-3 star-color" max="max" read-only="isReadonly" on-hover="rating=value;hoveringOver(value)" star-color="" rating="rating" ng-click="viewPage||fnPutRating(rating)" on-leave="overStar = null" titles="['one','two','three']" aria-labelledby="default-rating">
我不明白为什么我会收到此错误 任何帮助都将受到高度赞赏。
答案 0 :(得分:0)
您不能有多个指令(在这种情况下,uibRating
和starColor
)要求在同一元素上使用新范围。
一个简单的解决方法是在链接功能中解析rating
:在链接功能中使用$parse(attr.rating)(scope)
。
答案 1 :(得分:0)
在同一元素上请求隔离范围的两个指令(uib-rating和star-color)导致问题。
https://github.com/angular-ui/bootstrap/blob/master/src/rating/rating.js - uib-rating指令的源代码
https://docs.angularjs.org/error/$compile/multidir - angularjs