我可以在Angularjs ng-style指令中使用!important css关键字吗？

Question

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

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

这是控制器部分

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

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

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

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

由于背景的反转:透明!重要; 是背景:颜色十六进制代码!重要; (请参阅此处)我正在尝试使用ng-style设置它,但是当我尝试这样时,exclamantion标记会导致Angularjs翻转:

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

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

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

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

对于那些想要亲眼看到这一点的人来说, 这里有一个关注这个问题的人

Answer 1

显然你不能,这是一个已知的问题,但有一些解决方法可以在这里找到:

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

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

您无法!important在Chrome或FF(也可能是其他人)的DOM样式属性中使用该指令.style属性被解析为CSS,但HTMLElement.style属性却没有.不幸的是,你无法在这里设置属性的优先级(至少在Gecko/Blink/Webkit中).

所以,这里有一些解决方法:

解决方法#1

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

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

解决方法#2

或者,您也可以在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对象在哪里.

注意:IE <9不支持警告,因此对于依赖于属性优先级的此行为,解决方法#1可能是您最好的选择...

Answer 2

使用@Wawy的提示我更新了我的代码以使其工作.
对于登陆此页面的任何人,为了澄清我做了一个更新的Plunker,可以在这里找到

简而言之,这是html的一部分

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

这是控制器部分

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