Angularjsプログレスサークルが動的入力で機能しない

Question

Angular jsでプログレスサークルに入力値を与えようとすると、値（20％）のみが表示され、ローダーの色は表示されません。添付のスクリーンショットを参照してください。

入力値（20％）がHTMLで直接指定されている場合、角度の進捗状況は正常に機能します。 しかし値を表示している値{{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> 

あなたのことが分からないあなたがanglejsコードを投稿していないので、ng-class="rotate"を削除し、ちょうどclass="rotate" ng-classが式を取るので、rotateは$ scopeのいくつかのプロパティだと思うでしょう。

$scope.rotate='rotate'

が、使用して：

class="rotate" 

正常に動作する必要があります。

このすべては、ちょうどこの問題を回避すると厄介なアプローチですので、私はこれをチェックし、AngularJSの方法でそれを動作するように助言する：

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