angular.js: 13642 Fehler: [$ kompilieren: multidir]

Question

Ich habe ein Szenario, in dem ich die Sternfarben basierend auf Hover-Wert für das Anhängen der Farbe ändern müssen, verwende ich benutzerdefinierte Anweisung und für die Anzeige von Sternen ich bin 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> 

hier star-color ist die benutzerdefinierte Richtlinie

Richtlinie:

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

aber hier bin ich erhalte eine Fehlermeldung als

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

Ich verstehe nicht, warum ich diese Störung erhalte Jede mögliche Hilfe würde sehr geschätzt werden.

Answer 1

Sie können nicht mehrere Direktiven (in diesem Fall uibRating und starColor) haben, die nach einem neuen Bereich für dasselbe Element fragen.

Eine einfache Lösung wäre rating in der Link-Funktion zu analysieren: Verwenden Sie $parse(attr.rating)(scope) in Ihrer Link-Funktion.

Answer 2

Zwei Direktiven (uib-rating und star-color), die einen isolierten Bereich auf demselben Element anfordern, verursachen das Problem.

https://github.com/angular-ui/bootstrap/blob/master/src/rating/rating.js - Quellcode UIB-Rating Richtlinie

https://docs.angularjs.org/error/$compile/multidir - AngularJS