javascript - 根据 EasyPieCharts 的动态数据更改 ProgressBar 颜色

Question

我在 Angular 中使用 easypiecharts。我正在尝试向标记添加一个属性(data-statusId)并在 js 中使用它来更改进度条的颜色。当 data-opt= 8 时，它应该变成灰色，否则应该是绿色。但是我的条件一直失败，因为 greyBar 值一直返回为“未定义”。

附上截图以供引用。我需要访问“opt”数据集下的值。

.directive('isLoaded', function () {
    return {
        restrict: 'A', //Attribute type
        link: function (scope, elements, arguments) {
            ProgressMeter($('#inprogress-card').find('.progress-icon'), false);
        }
    }
});
function Meter($ele, isPopUp) {
    setTimeout(function () {
     if (isPopUp && $ele.find('canvas').length > 0) {
       $ele.data('easyPieChart').update(0);
       $ele.data('easyPieChart').update($ele.attr('data-percent'));
     }
     else {         
        $ele.easyPieChart({
            easing: 'easeOutBounce',
            scaleColor: false,
            lineWidth: 4,
            trackColor: '#CCCCCC',
            barColor: function () {
            var greyBar = $ele.data('opt');
                if (typeof(greyBar) != 'undefined')
                    return '#44AD3A'
                else
                    return '#989798'
            },
            lineCap: 'round',
            onStep: function (from, to, percent) {
            }
        });
     }
    }, 100);
}`

HTML:

<div class="progress-icon" data-opt="{{list.Status}}" data-percent=" {{ (20/30)* 100)}} ">

Answer 1

对于某些方式，我遇到了 data-opt 的问题，.我改用了isolated-scope。 我在 HTML View 中添加了“opt={{list.Status}}”，然后在 js 中添加了范围:{opt:'@'}。它奏效了!!

HTML,

<div ng-click="openModal($event,list,id)" opt="{{list.Status}}">
    <div class="progress-icon" data-percent=" {{ (20/30)* 100)}} ">
</div>

js:

.directive('isLoaded', function () {
        return {
            restrict: 'A',
            scope:{
               opt:'@' //*Added this* 
            }
            link: function (scope, elements, arguments) {
               if(scope.opt!=8)
                ProgressMeter($('#inprogress-card').find('.progress-icon'), false,'#44AD3A');
               else
                ProgressMeter($('#inprogress-card').find('.progress-icon'), false,'#989798');
            }
        }
    });
    function Meter($ele, isPopUp) {
        setTimeout(function () {
         if (isPopUp && $ele.find('canvas').length > 0) {
           $ele.data('easyPieChart').update(0);
           $ele.data('easyPieChart').update($ele.attr('data-percent'));
         }
         else {         
            $ele.easyPieChart({
                easing: 'easeOutBounce',
                scaleColor: false,
                lineWidth: 4,
                trackColor: '#CCCCCC',
                barColor: function () {
                var greyBar = $ele.data('opt');
                    if (typeof(greyBar) != 'undefined')
                        return '#44AD3A'
                    else
                        return '#989798'
                },
                lineCap: 'round',
                onStep: function (from, to, percent) {
                }
            });
         }
        }, 100);
    }`