我可以在 Angularjs ng-style 指令中使用 !important css 关键字吗? [英] Can I use the !important css keyword with Angularjs ng-style directive?

问题描述

我在使用 boostrap3 时遇到问题，它是默认背景:透明 !important; 打印设置.
我需要在我的 web 应用程序中显示热图并且可以打印这些热图.
我正在使用 ng-style 指令来动态计算所需的背景颜色.
简而言之，这是html部分

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>

这是控制器部分

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

但是，由于 bootstrap3 使用 !important 关键字将所有背景设置为透明，因此我无法打印这些.

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

这是引导程序 3.1.0 css 的一部分，导致缺少背景颜色的问题:

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;
  }
}

由于背景的反面:transparent !important;是背景:颜色十六进制代码！重要；(请参阅此处)我正在尝试使用 ng 样式进行设置，但是当我尝试此操作时，感叹号会导致 Angularjs 翻转:

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 }
};

或者当我在 html 模板中尝试这个时

or alternatively when I try this in the html template

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

有谁知道我如何使用 !important css 关键字和 Angularjs ng-style 指令来覆盖 bootstrap3 通配符?

对于那些想亲眼看到这一点的人，这里是一个显示问题的plunker

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

推荐答案

显然您不能，这是一个已知问题，但可以在此处找到一些解决方法:

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

以下解决方案已从网站复制，以防链接断开或更改.

您不能在 Chrome 和 FF(也可能是其他浏览器)的 DOM 样式属性中使用 !important 指令.style 属性被解析为 CSS，但 HTMLElement.style 属性不会.不幸的是，您无法在此处设置属性的优先级(至少在 Gecko/Blink/Webkit 中).

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:

解决方法 #1

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

这将是浏览器支持的最佳方式，因为 CSS 属性优先级将在此处正确解析.

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

解决方法 #2

或者，您也可以在 javascript 中执行以下操作:

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 = '';
  }
}

其中 $element 是引用 HTMLElement 的 jQuery/jqLit​​e 对象.

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

注意:IE 不支持警告9 所以变通方法 #1 可能是您依赖属性优先级的这种行为的最佳选择...

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

这篇关于我可以在 Angularjs ng-style 指令中使用 !important css 关键字吗?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！