Can I use the !important css keyword with Angularjs ng-style directive?

Question

I'm having an issue with boostrap3 and it's default background: transparent !important; print setting.
I have the need to show a heatmap in my webapp and have these printable.
I'm using an ng-style directive for that to dynamically calculate the needed background-color.
In short, this is the html part

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

and this is the controller part

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

However, because bootstrap3 sets all backgrounds to transparent with the !important keyword, I can't print these.

This is the part of bootstrap 3.1.0 css causing the issue with missing background-color:

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

Since the inverse of background: transparent !important; is background: color hex code !important; (see here ) I'm trying to set that using the ng-style, but then the exclamantion mark causes Angularjs to flip when I try this:

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

or alternatively when I try this in the html template

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

Anyone out there that knows how I can use the !important css keyword with the Angularjs ng-style directive to override the bootstrap3 wildcard?

For those who want to see this with their own eyes, here's a plunker showing the issue

the problem is scalecolor returns an object, the second one is that `"scalecolor(10) !important"` is not really an expression (ng-style takes either object or an expression [maybe also array]) — doodeec, Feb 26 '14 at 16:06
@Shomz well yes, but in this case that would mean I either need to get rid of bootstrap3 or overwrite it's css and leave cdn's aside. — AardVark71, Feb 26 '14 at 16:17
I'm having issues with Plunkr in general right now. It must be my network. This makes me sad. — David East, Feb 26 '14 at 16:23
why not just add a stylesheet of your own to override that rule? (use `!important`, too! fight fire with fire!) — Eliran Malka, Feb 26 '14 at 16:32
@AardVark71 Sorry, didn't catch that bootstrap uses !important. That's weird, though. — Shomz, Feb 26 '14 at 16:38

score 19 · Accepted Answer · edited Oct 15 '15 at 14:25

Apparently you can't and it's a known issue but there is some workaround that can be found here:

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

The solution below has been copied from the site just in case the link breaks, or get changed.

You're not able to use the !important directive in the DOM style property in either Chrome nor FF (probably others too). The style attribute gets parsed as CSS, but the HTMLElement.style property doesn't. Unfortunately you're not able to set a property's priority here (in Gecko/Blink/Webkit, at least).

So, there are some workarounds here:

Workaround #1

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

This would be your best way to go in terms of browser-support, because the CSS property priority will get parsed correctly here.

Workaround #2

Alternatively, you can also do the following in javascript:

$scope.$watch(conditionalStyle);

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

Where $element is a jQuery/jqLite object referencing an HTMLElement.

Note: caveats are not supported in IE < 9 so workaround #1 is probably your best bet for this behavior where you depend on property priority...

Yes, thanks. The workaround specified there works. I had to switch to using the ngAttr attribute bindings and (i) use ng-attr-style="{{scalecolor(10)}}" in the template and (ii) have scalecolor return 'background-color: ' + plnkUtils.scaleColorInt('#EE0000', '#88FF00', perc) + '!important'; — AardVark71, Feb 26 '14 at 20:34
I'm getting a "can't bind to 'ng-attr-style' since it isn't a known property of 'input'" error when I try and use this to apply a conditional style to an input with !important. Yes Any suggestions here? — David, Sep 28 '17 at 15:40

score 6 · Answer 2 · answered Feb 27 '14 at 10:55

Using the tips for @Wawy I updated my code to get it to work.
For anyone landing on this page, for clarification I made an updated Plunker that can be found here

In short, this is now the html part

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

and this is the controller part

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

Can I use the !important css keyword with Angularjs ng-style directive?

2 Answers2

Linked