ngStyle fails when use !important

[GabrielDelepine]

Tested with angular 1.2.4

Example : http://jsfiddle.net/yappli/X8era/4/

[caitp]

You're not able to use the !important directive in the DOM style property in either Chrome nor FF (probably others too). I'm not sure this would work in jQuery either. edit I guess I was writing something here and didn't finish! So, 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 work arounds here:

<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.

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.

caveats: Not supported in IE < 9.

So, workaround #1 is probably your best bet for this behaviour where you depend on property priority...

---

original answer here

In any case, inline styles tend to take precedence over those found in stylesheets, except for those with '!important'

If you really need this, you can use ng-attr-style to do it, at least in chrome/ff28. http://plnkr.co/edit/drS4oqb09gOIJeXjCfJo?p=preview

I suppose jqLite could be hacked to use CSSStyleDeclaration.setProperty() with the 'important' priority if it sees !important in the string, but I'm just not sure if it's worth it.

[GabrielDelepine]

Thanks for your answer. I will do tests with style and !important. I will report-it here soon.

[caitp]

If it helps, according to http://help.dottoro.com/ljdpsdnb.php, IE8 and less don't provide the CSSStyleDeclaration.setProperty(), however in the future it might be a good performance improvement over the existing implementation of ngStyle / jqLite.css() --- less string manipulation needed, and the bonus of supporting style priority

[GabrielDelepine]

Thanks for your comprehensive answer @caitp. It helps a lot.

I will close this issue. Maybe I will open-it back for Angular 2.0, when IE8 will be no longuer supported.