我能用这个吗!带有Angularjs ng style指令的重要css关键字?

我能用这个吗!带有Angularjs ng style指令的重要css关键字?,angularjs,twitter-bootstrap,Angularjs,Twitter Bootstrap,我对boostrap3有问题,它是默认背景:透明!重要的打印设置 我需要在我的webapp中显示热图,并将这些热图打印出来。 我使用ng样式指令来动态计算所需的背景颜色。 简而言之,这是html部分 <div class="heatmap" ng-style="scalecolor(10)">lorem ipsum</div> <div class="heatmap" ng-attr-style="{{ngAttrScaleColor(10)}}">YES,

我对boostrap3有问题,它是默认背景:透明!重要的打印设置
我需要在我的webapp中显示热图,并将这些热图打印出来。
我使用ng样式指令来动态计算所需的背景颜色。
简而言之,这是html部分

<div class="heatmap" ng-style="scalecolor(10)">lorem ipsum</div>
<div class="heatmap" ng-attr-style="{{ngAttrScaleColor(10)}}">YES, ng-attr-style works !</div>
然而,因为bootstrap3使用将所有背景设置为透明!重要的关键字,我无法打印这些

这是bootstrap 3.1.0 css的一部分,导致缺少背景颜色的问题:

@media print {
  * {
    color: #000 !important;
    text-shadow: none !important;
    background: transparent !important;
    box-shadow: none !important;
  }
}
因为背景相反:透明!重要的;是背景:彩色十六进制代码!重要的; (见附件) 我尝试使用ng样式设置它,但是当我尝试以下操作时,感叹号会导致Angularjs翻转:

 $scope.scalecolor = function(perc) {
    return { backgroundColor: plnkUtils.scaleColorInt('#EE0000', '#88FF00', perc)  !important }
};
或者,当我在html模板中尝试此操作时

ng-style="scalecolor(10) !important"
任何人都知道我如何使用!使用Angularjs ng style指令覆盖bootstrap3通配符的重要css关键字?


对于那些想亲眼看到这一点的人来说,一个plunker显示问题显然你不能,这是一个已知的问题,但是可以在这里找到一些解决方法:

以下解决方案已从网站复制,以防链接中断或更改。

您无法使用
!Chrome或FF(可能还有其他)中DOM样式属性中的重要指令。style属性被解析为CSS,但是
HTMLElement.style
属性没有。不幸的是,您无法在此处设置属性的优先级(至少在Gecko/Blink/Webkit中)

因此,这里有一些变通方法:

解决办法#1

<ANY data-ng-attr-style="{{ blue && 'background-color: blue!important' || '' }}">
</ANY>
其中,
$element
是引用HTMLElement的jQuery/jqLite对象


注意:IE<9不支持警告,因此解决方案#1可能是这种行为的最佳选择,在这种情况下,您依赖于属性优先级…

使用@Wawy I的提示更新了我的代码以使其正常工作。
对于任何登陆本页面的人,为了澄清,我做了一个更新的Plunker,可以找到

简而言之,这就是html部分

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

你应该尽量避免使用!重要信息。找不到您的Plunkr。问题是scalecolor返回一个对象,第二个问题是,
“scalecolor(10)!重要信息”
不是一个真正的表达式(ng样式接受对象或表达式[也可能是数组])@David这应该解决。不。我还是去不了。是的,谢谢。此处指定的变通方法有效。我不得不切换到使用ngAttr属性绑定,并且(I)在模板中使用ng attr style=“{{scalecolor(10)}}”,以及(ii)让scalecolor返回“background color:”+plnkUtils.scaleColorInt('#EE0000','#88FF00',perc)+'!重要的",;当我尝试使用此选项将条件样式应用于具有的输入时,出现“无法绑定到'ng attr style',因为它不是'input'的已知属性”错误!重要的。有什么建议吗?
$scope.ngAttrScaleColor = function(perc) {
        return  'background-color: ' + plnkUtils.scaleColorInt('#EE0000', '#88FF00', perc) + '!important';
 };