Question

我有一个场景，我需要根据悬停值更改星形颜色附加颜色我使用自定义指令和显示星我使用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">

我不明白为什么我会收到此错误任何帮助都将受到高度赞赏。

Answer 1

您不能有多个指令（在这种情况下，uibRating和starColor）要求在同一元素上使用新范围。

一个简单的解决方法是在链接功能中解析rating：在链接功能中使用$parse(attr.rating)(scope)。

Answer 2

在同一元素上请求隔离范围的两个指令（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

angular.js：13642错误：[$ compile：multidir]

2 个答案: