Hello everyone, I am facing an issue with my directive.
function percentview($compile) {
var linker = function (scope, element) {
var controldef = "";
switch (scope.percentage.state) {
case 'stable':
controldef = ' <span class="text-yellow font-17">' +
' <i>0%</i>' +
'<i class="fa "></i> </span>';
break;
case 'up':
controldef = ' <span class="text-issue font-17">' +
' <i>+ {{percentage.percentage}}%</i>' +
'<i class="fa fa-arrow-up"></i> </span>';
break;
case 'down':
controldef = ' <span class="text-green font-17">' +
' <i- {{percentage.percentage}}%</i>' +
'<i class="fa fa-arrow-down"></i> </span>';
break;
default:
break;
}
element.html($compile(controldef));
};
var directive = {
restrict: 'E',
scope: {
percentage: '='
},
link: linker
}
return directive;
}
percentview.$inject = ['$compile'];
angular
.module('app')
.directive('percentview', percentview);
html://
<percentview percentage="percentiles[0]"></percentview>
Currently, I am encountering an error message stating scope.percentage is undefined. Upon logging the scope object in the link function, I can see that there is a property (object) called percentage with all the necessary values. Does anyone know how I can successfully pass an object in the link function, or can identify what might be wrong with this code?