twitter-bootstrap 我可以在 Angularjs ng-style 指令中使用 !important css 关键字吗？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/22046704/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Can I use the !important css keyword with Angularjs ng-style directive?
提问by AardVark71
I'm having an issue with boostrap3and 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
我在使用boostrap3 时遇到问题，它的默认背景是：transparent !important; 打印设置。
我需要在我的 web 应用程序中显示一个热图并且可以打印这些热图。
我正在使用 ng-style 指令来动态计算所需的背景颜色。
简而言之，这是html部分
<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 !importantkeyword, I can't print these.
但是，由于 bootstrap3 使用!important关键字将所有背景设置为透明，因此我无法打印这些。
This is the part of bootstrap 3.1.0 css causing the issue with missing background-color:
这是 bootstrap 3.1.0 css 的一部分，导致缺少背景颜色的问题：
@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 flipwhen I try this:
由于背景的倒数：透明！重要；是背景：颜色十六进制代码！重要；（请参阅此处）我正在尝试使用 ng 样式进行设置，但是当我尝试此操作时，感叹号会导致 Angularjs 翻转：
$scope.scalecolor = function(perc) {
return { backgroundColor: plnkUtils.scaleColorInt('#EE0000', '#88FF00', perc) !important }
};
or alternatively when I try this in the html template
或者当我在 html 模板中尝试这个时
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'sa plunker showing the issue
任何知道如何使用 !important css 关键字和 Angularjs ng-style 指令来覆盖 bootstrap3 通配符的人吗？
对于那些想亲眼看到这一点的人， 这里有一个显示问题的plunker
回答by Wawy
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
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 !importantdirective in the DOM style property in either Chrome nor FF (probably others too). The style attribute gets parsed as CSS, but the HTMLElement.styleproperty doesn't. Unfortunately you're not able to set a property's priority here (in Gecko/Blink/Webkit, at least).
您不能!important在 Chrome 或 FF（也可能是其他浏览器）的 DOM 样式属性中使用该指令。style 属性被解析为 CSS，但HTMLElement.style属性没有。不幸的是，您无法在此处设置属性的优先级（至少在 Gecko/Blink/Webkit 中）。
So, there are some workarounds here:
因此，这里有一些解决方法：
Workaround #1
解决方法 #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.
这将是浏览器支持方面的最佳方式，因为 CSS 属性优先级将在此处正确解析。
Workaround #2
解决方法 #2
Alternatively, you can also do the following in javascript:
或者，您也可以在 javascript 中执行以下操作：
$scope.$watch(conditionalStyle);
function conditionalStyle() {
if ($scope.blue) {
$element[0].style.setProprety('background-color', 'blue', 'important');
} else {
$element[0].style.backgroundColor = '';
}
}
Where $elementis a jQuery/jqLite object referencing an HTMLElement.
$element引用 HTMLElement 的 jQuery/jqLite 对象在哪里。
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...
注意：IE < 9 不支持警告，因此解决方法 #1 可能是您依赖属性优先级的这种行为的最佳选择...
回答by AardVark71
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
使用@Wawy 的提示，我更新了代码以使其正常工作。
对于登陆此页面的任何人，为了澄清起见，我制作了一个更新的Plunker，可以在这里找到
In short, this is now the html part
简而言之，这是现在的 html 部分
<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';
};
