Могу ли я использовать ключевое слово css! Important с директивой Angularjs ng?

У меня возникла проблема с boostrap3 и по умолчанию: прозрачный! Important ; настройка печати.
У меня есть необходимость показать горячую карту в моем webapp и напечатать ее.
Я использую директиву ng-style для этого, чтобы динамически вычислять необходимый фоновый цвет.
Короче говоря, это html-часть

<div class="heatmap" ng-style="scalecolor(10)">lorem ipsum</div>

и это часть контроллера

$scope.scalecolor = function(perc) {
        return { backgroundColor: plnkUtils.scaleColorInt('#EE0000', '#88FF00', perc) }
    };

Однако, поскольку bootstrap3 устанавливает все фоны в прозрачные с ключевым словом ! Important, я не могу их распечатать.

Это часть bootstrap 3.1.0 css, вызывающая проблему с отсутствующим фоном:

@media print {
  * {
    color: #000 !important;
    text-shadow: none !important;
    background: transparent !important;
    box-shadow: none !important;
  }
}

Поскольку обратный фон: прозрачный! Важный; is background: color hex code! important; (см. здесь) Я пытаюсь установить это с помощью ng-стиля, но тогда знак exclamantion заставляет Angularjs переворачиваться, когда я пытаюсь это сделать:

 $scope.scalecolor = function(perc) {
    return { backgroundColor: plnkUtils.scaleColorInt('#EE0000', '#88FF00', perc)  !important }
};

или, альтернативно, когда я пробую это в html-шаблоне

ng-style="scalecolor(10) !important"

Кто-нибудь, кто знает, как я могу использовать ключевое ключевое слово css с директивой Angularjs ng-style, чтобы переопределить подстановочный шаблон bootstrap3?

Для тех, кто хочет увидеть это своими глазами, вот плункер, показывающий проблему

Ответы

Ответ 1

Видимо, вы не можете и это известная проблема, но есть кое-какое обходное решение, которое можно найти здесь:

https://github.com/angular/angular.js/issues/5379

Решение, приведенное ниже, было скопировано с сайта на случай, если ссылка сломается или изменится.

Вы не можете использовать !important директиву в свойстве свойства DOM в Chrome или FF (возможно, и в других). Атрибут style анализируется как CSS, но свойства HTMLElement.style этого не делают. К сожалению, вы не можете установить приоритет свойства здесь (по крайней мере, в Gecko/Blink/Webkit).

Итак, есть некоторые способы обхода:

Обходной путь №1

<ANY data-ng-attr-style="{{ blue && 'background-color: blue!important' || '' }}">
</ANY>

Это будет вашим лучшим способом в плане поддержки браузера, потому что приоритет свойства CSS будет корректно проанализирован здесь.

Обходной путь №2

Кроме того, вы также можете сделать следующее в javascript:

$scope.$watch(conditionalStyle);

function conditionalStyle() {
  if ($scope.blue) {
    $element[0].style.setProprety('background-color', 'blue', 'important');
  } else {
    $element[0].style.backgroundColor = '';
  }
}

Где $element - объект jQuery/jqLite, ссылающийся на элемент HTMLElement.

Примечание. Предостережения не поддерживаются в IE <9, поэтому обходной путь №1, вероятно, лучший выбор для такого поведения, когда вы зависите от приоритета свойства...

Ответ 2

Используя советы для @Wawy, я обновил свой код, чтобы заставить его работать.
Для тех, кто приземлился на этой странице, для уточнения я сделал обновленный Plunker, который можно найти здесь

Короче говоря, теперь это html-часть

<div class="heatmap" ng-attr-style="{{ngAttrScaleColor(10)}}">YES, ng-attr-style works !</div>

и это часть контроллера

$scope.ngAttrScaleColor = function(perc) {
        return  'background-color: ' + plnkUtils.scaleColorInt('#EE0000', '#88FF00', perc) + '!important';
 };