AngularJS шаблон внутри директива. Изменить стиль?

Question

css внутри директивы не компилируется и не приводит к одиночному цвету самого зеленого цвета. Я хочу иметь разные цвета для разных значений для идентификатора значения, а цвет css должен соответственно меняться, но он всегда уступает последнему цвету для всех виджетах термометра. Пожалуйста помоги.

angular.module('directives').directive('thermometer', function(){ 
    return { 
     restrict: 'AE' 
     , replace: true 
     , transclude:true 
     ,scope : { 
      value : "=", 
      maxValue : "=" , 
      text:"@", 
      percent:"=" 
      } 
     ,template: function(element, attrs) { 
      var html = '<div style="float:left;margin-left:40px"><style> .donation-meter {margin-right:auto;margin-left:auto; width: 80px; } .donation-meter .glass { background: #e5e5e5; border-radius: 100px 100px 0 0; display: block; height: 100px; margin: 0 35px 10px; padding: 5px; position: relative; width: 20px; } .donation-meter .amount { background:{{color}}; border-radius: 100px; display: block; width: 20px; position: absolute; bottom: 5px; } .donation-meter strong { display: block; text-align: center; } .donation-meter .goal { font-size: 20px; } .donation-meter .total { font-size: 16px; position: absolute; right: 35px; } .bulb { background: #e5e5e5; border-radius: 100px; display: block; height: 50px; margin: 0 35px 10px; padding: 5px; position: relative; top: -20px; right: 15px; width: 50px; } .bulb .red-circle { background: {{color}}; border-radius: 100px; display: block; height: 50px; width: 50px; } .bulb .filler { background: {{color}}; border-radius: 100px 100px 0 0; display: block; height: 30px; width: 20px; position: relative; top: -65px; right: -15px; z-index: 30; } </style>'; 
      html += '<div class="donation-meter"> <b>{{text}}</b>'; 
      html += '<b class="goal">{{maxValue }}</b> <span class="glass"> <b class="total" style="bottom:{{(value/maxValue)*100}}%">{{value}}'; 
      html+= '</b> <span class="amount" style="height:{{(value/maxValue)*100}}%"></span> </span> <div class="bulb"> <span class="red-circle"></span> <span class="filler"> <span></span> </span> </div> </div></div>'; 

      return html; 

     } 
     ,link:function(scope){ 

      scope.$watch('value',function(newValue){ 
       console.log("--------------------------"); 
       console.log(); 
       if(newValue==75){ 
        scope.color="blue"; 
       } 
       if(newValue==76){ 
        scope.color="green"; 
       } 
      }); 
     } 

    } 
}); 

Цвет всегда снижается до того, что является последним значением. В остальное время он отлично работает. Пожалуйста помоги.

Answer 1

Вместо того, чтобы цвет на классе .amount положить его в стиле элемента, который имеет класс .amount:

html+= '</b> <span class="amount" ng-style="{height:(value/maxValue)*100 + '%', background: color}"></span> ... 

Answer 2

Было бы проще поставить шаблон на внешний файл, как термометр. HTML, вы просто должны указать местоположение, как это:

angular.module('directives').directive('thermometer', function(){ 
    return { 
     restrict: 'AE' 
     , replace: true 
     , transclude:true 
     ,scope : { 
      value : "=", 
      maxValue : "=" , 
      text:"@", 
      percent:"=" 
      } 
     ; templateUrl: 'thermometer.html' 
     ,link:function(scope){ 

      scope.$watch('value',function(newValue){ 
       console.log("--------------------------"); 
       console.log(); 
       if(newValue==75){ 
        scope.color="blue"; 
       } 
       if(newValue==76){ 
        scope.color="green"; 
       } 
      }); 
     } 

    } 
}); 

А затем создать HTML-файл: < DIV стиль = ...> ... </DIV>

Answer 3

Поставив переменную внутри <style> правило, вы переопределение класс CSS каждый раз, когда ваша директива получает помещается на страницу - так что, если первый экземпляр директивы устанавливает

.donation-meter .amount { background:red}

но следующий один устанавливает его

.donation-meter .amount { background:green}

то последнее правило CSS собирается отменить предыдущие и поэтому применимы ко всем .donation-meter .amount элементам на странице.

Вы должны извлечь большую часть своего CSS в таблицу стилей, а не перерисовывать ее для каждого экземпляра директивы. Для той части, где вам нужно правило переменного стиля, использование нг-класс, где это возможно:

<div ng-class="{red: newValue < 75, green: newValue >74}">...</div>

или же установить переменный стиль непосредственно на элементе, а не на правилах класса:

<div style="background-color: {{color}}">

вместо

<style>.foo {background-color: {{color}}</style> <div class="foo"></div>