javascript - Angularjs 进度圈不适用于动态输入

Question

当我尝试在 Angular js 中为进度圈提供输入值时，仅显示值 (20%) 而未显示加载器颜色。请引用随附的屏幕截图。

如果在 HTML 中直接给出输入值 (20%)，则 Angular 进度可以正常工作。但是当尝试绑定(bind) value{{count}} 时它只显示值，但是缺少一些 css 并且不显示进度颜色。

$scope.count= 20;

(function($) {
    $.fn.loading = function() {

        var backgroundColor = '#ccc';
        var progressColor = '#1abc9c';
        var percent = 90;
        var duration = 2000;

        var DEFAULTS = {
            backgroundColor : '#ccc',
            progressColor : '#1abc9c',
            percent : 90,
            duration : 2000
        };

        $(this)
                .each(
                        function() {
                            var $target = $(this);

                            var opts = {
                                backgroundColor : $target.data('color') ? $target
                                        .data('color').split(',')[0]
                                        : DEFAULTS.backgroundColor,
                                progressColor : $target.data('color') ? $target
                                        .data('color').split(',')[1]
                                        : DEFAULTS.progressColor,
                                percent : $target.data('percent') ? $target
                                        .data('percent') : DEFAULTS.percent,
                                duration : $target.data('duration') ? $target
                                        .data('duration') : DEFAULTS.duration
                            };
                            // console.log(opts);

                            $target
                                    .append('<div class="background"></div><div class="rotate"></div><div class="left"></div><div class="right"></div><div class=""><span>'
                                            + opts.percent + '%</span></div>');

                            $target.find('.background').css('background-color',
                                    opts.backgroundColor);
                            $target.find('.left').css('background-color',
                                    opts.backgroundColor);
                            $target.find('.rotate').css('background-color',
                                    opts.progressColor);
                            $target.find('.right').css('background-color',
                                    opts.progressColor);

                            var $rotate = $target.find('.rotate');
                            setTimeout(function() {
                                $rotate.css({
                                    'transition' : 'transform ' + opts.duration
                                            + 'ms linear',
                                    'transform' : 'rotate(' + opts.percent
                                            * 3.6 + 'deg)'
                                });
                            }, 1);

                            if (opts.percent > 50) {
                                var animationRight = 'toggle '
                                        + (opts.duration / opts.percent * 50)
                                        + 'ms step-end';
                                var animationLeft = 'toggle '
                                        + (opts.duration / opts.percent * 50)
                                        + 'ms step-start';
                                $target.find('.right').css({
                                    animation : animationRight,
                                    opacity : 1
                                });
                                $target.find('.left').css({
                                    animation : animationLeft,
                                    opacity : 0
                                });
                            }
                        });
    }
})(jQuery);

.position {
  float: left;
  margin: 20px 0px;
}

.progress-bar-container {
  width: 100px;
  margin: 0 auto;
}

.pb-heading {
    border: 0px;
    margin-bottom: -10px;
}


.progress-bar {
  position: relative;
  height: 100px;
  color: #111;
  background-color: transparent;
  -webkit-box-shadow: inset 0 0px 0 rgba(0,0,0,.15);
  box-shadow: inset 0 0px 0 rgba(0,0,0,.15);
}

.progress-bar div {
  position: absolute;
  height: 100px;
  width: 100px;
  border-radius: 50%;
}

.progress-bar div span {
    position: absolute;
    font-family: Arial;
    font-size: 20px;
    line-height: 80px;
    height: 75px;
    width: 75px;
    left: 12.5px;
    top: 12.5px;
    text-align: center;
    border-radius: 50%;
    background-color: white;
}

.progress-bar .background { background-color: #b3cef6; }

.progress-bar .rotate {
  color: red;
  clip: rect(0 50px 200px 0); 
  background-color: #4b86db;
}

.progress-bar .left {
  clip: rect(0 50px 200px 0); 
  opacity: 1;
  background-color: #b3cef6;
}

.progress-bar .right {
  clip: rect(0 50px 200px 0);
  transform: rotate(180deg);
  opacity: 0;
  background-color: #4b86db;
}
 @keyframes 
toggle {  0% {
 opacity: 0;
}
 100% {
 opacity: 1;
}
}

<div class="col-md-3">
     <div class="panel db-panel">
                        <div class="panel-heading pb-heading">
                            Total Uploaded this Week
                        </div>
                        <!-- /.panel-heading -->
                        <div class="panel-body progress-bar-container" >
                        <div class="progress-bar position"  ng-class="rotate"  data-percent={{count}} data-duration="1000" data-color="#ccc,#f39c12"></div>
                        </div>                                                
    </div>
    <div class="panel db-panel">
                        <div class="panel-heading pb-heading">
                            Successfully Uploaded
                        </div>
                        <!-- /.panel-heading -->
                        <div class="panel-body progress-bar-container">
                        <div class="progress-bar position" data-percent="20" data-duration="1000" data-color="#ccc,#f39c12"></div>
                        </div>                                                
    </div>


</div>

Answer 1

我相信将您的进度条 data-percent={{count}} 更改为带有引号会解决您的问题:

<div class="progress-bar position"  ng-class="rotate"  data-percent="{{count}}" data-duration="1000" data-color="#ccc,#f39c12"></div>

我也不确定你的逻辑，因为你没有发布任何 angularjs 代码，删除 ng-class="rotate" 并只放 class="rotate" ng-class 将采用表达式，因此它会认为 rotate 是 $scope 上的某个属性，您需要将其设置为:

$scope.rotate='旋转'

但使用:

class="rotate" 

应该可以正常工作。

因为所有这些只是一种变通方法和困惑的方法，我建议检查一下并以 AngularJS 的方式解决它:

http://jtblin.github.io/angular-chart.js/