javascript - angular.js:13642 Error: [$compile:multidir] -
this question has answer here:
i have scenario need change star colors based on hover value appending color using custom directive , displaying stars 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 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 getting error as
angular.js:13642 error: [$compile:multidir] multiple directives [starcolor (module: hrportalapp), uibrating (module: ui.bootstrap.rating)] asking 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 getting error highly appreciated.
you can’t have multiple directives (in case, uibrating , starcolor) asking new scope on same element.
one easy fix parse rating inside link function: use $parse(attr.rating)(scope) in link function.
Comments
Post a Comment