angular.js:13642 Error: [$compile:multidir]

Question

I have a scenario where i need to change the star colors based on hover value for appending the color i am using custom directive and for displaying stars i am using 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>

here star-color is the custom directive

directive:

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

but here i am getting an error as

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

I dont understand why i am getting this error Any help would be highly appreciated.

score 0 · Answer 1 · answered Jul 11 '16 at 12:19

0

You can’t have multiple directives (in this case, uibRating and starColor) asking for a new scope on the same element.

One easy fix would be to parse rating inside the link function: use $parse(attr.rating)(scope) in your link function.

answered Jul 11 '16 at 12:19

Iso

3,148
23
31

Thanks for answering;but i need to watch on the rating value if it changes then i need to append the color according to that But when doing $parse(attr.rating) i am getting "rating" by which i am unable to get the value – Shikha thakur Jul 11 '16 at 12:38

score 0 · Answer 2 · edited Jul 11 '16 at 12:27

0

Two directives(uib-rating and star-color) requesting isolated scope on the same element is causing the problem.

https://github.com/angular-ui/bootstrap/blob/master/src/rating/rating.js - source code of uib-rating directive

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

edited Jul 11 '16 at 12:27

Kalu Singh Rao

1,671
1
16
21

answered Jul 11 '16 at 12:22

Gaara

78
2
12

angular.js:13642 Error: [$compile:multidir]

2 Answers2