Easypiechart angularJs меняет цвет

Question

Я пытаюсь использовать га-югулярную версию easypiechart для создания простого масштаба цвета при изменении значения. Цвет должен измениться при изменении значения, от красного до зеленого.

В старой версии easypiechart, JQuery основе, это стало возможным делать что-то подобное:

barColor: function(percent) { 
    percent /= 100; 
    return "rgb(" + Math.round(255 * (1-percent)) + ", " + Math.round(255 * percent) + ", 0)"; 
} 

Я сделал plunker к demonstarete, что я пытаюсь сделать, вверх угловато, недостатком является то, jQuery: http://plnkr.co/edit/7yQ1SiIPHFh62yxwnW9e?p=preview

Answer 1

У меня была такая же проблема, как и вы, за исключением того, что я использовал легкую круговую диаграмму в более сложной директиве, которую я определил сам. У меня было время понять, как я могу передать переменные модели процента и параметров в области действия и внести изменения при изменении атрибутов внешней директивы. Из-за этого я отказался от угловой версии easyPieChart и вернулся к версии jQuery (которая, вероятно, была мной, а не директивой easypiechart, поскольку я новичок в угловом, поэтому я борюсь с некоторыми концепциями).

Вот упрощенная версия моего кода показывает, что я сделал:

Моей Директивы infoBox.js:

'use strict'; 

commonApp.directive('infoBox', function() { 
    return { 
    restrict: 'E', 
    replace: true, 
    scope: { 
     percent: '@', 
     text: '@', 
     content: '@', 
     textIsNumber: '@' 
    }, 
    templateUrl: '/directives/infoBox.html', 
    controller: 'infoBoxController', 
    } 
    }; 
}); 

My Template infoBox.html

<div class="infobox"> 
    <div class="infobox-progress"> 
    <div class="easy-pie-chart percentage" data-percent="{{percent}}" data-size="50"> 
     <span class="percent">{{percent}}</span>% 
    </div> 
    </div> 
    <div class="infobox-data"> 
    <span ng-class="{'infobox-data-number': textIsNumber, 'infobox-text': !textIsNumber}" class="infobox-data-number">{{text}}</span> 

    <div class="infobox-content"> 
     {{content}} 
    </div> 
    </div> 
</div> 

И мой контроллер infoBoxController .js

'use strict'; 

commonApp.controller('infoBoxController', 
    function infoboxController($scope, $log, $attrs, $element) { 
    var init = function() { 
     var $chart = $element.find('.easy-pie-chart.percentage')[0]; 
     var barColor = $element.data('color') || (!$element.hasClass('infobox-dark') ? $element.css('color') : 'rgba(255,255,255,0.95)'); 
     var trackColor = barColor == 'rgba(255,255,255,0.95)' ? 'rgba(255,255,255,0.25)' : '#E2E2E2'; 
     $($chart).easyPieChart({ 
     barColor: barColorFunction, 
     trackColor: trackColor, 
     scaleColor: false, 
     lineCap: 'butt', 
     lineWidth: parseInt(size/10), 
     animate: /msie\s*(8|7|6)/.test(navigator.userAgent.toLowerCase()) ? false : 1000, 
     size: size 
     }); 
    }; 
    var barColorFunction = function (percent) { 
     if (percent <= 100) { 
     return ($element.data('color') || (!$element.hasClass('infobox-dark') ? $element.css('color') : 'rgba(255,255,255,0.95)')); 
     } else { 
     return ('rgba(255, 0, 0, 0.7)'); 
     } 
    }; 

    init(); 
    var update = function() { 
     var $chart = $element.find('.easy-pie-chart.percentage')[0]; 
     $($chart).data('easyPieChart').update($attrs.percent); 
    }; 
    $scope.$watch(function() { 
     return [$attrs.percent]; 
    }, update, true); 
    } 
); 

Директивы Применение:

<info-box class="infobox-blue2" percent="{{modelPercent}}" text="describes pie chart" text-is-number="false" content="more describing pie chart"></info-box> 

У меня есть часы на моем атрибуте процент, который запускает функцию прямого обновления JQuery. И функция barColorFunction - это то, что контролирует, какой цвет я показываю.

Обстоятельства немного отличаются, но я надеюсь, что это поможет.