angularjs - 我可以将 !important css 关键字与 Angularjs ng-style 指令一起使用吗？

Question

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

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

这是 Controller 部分

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

然而，因为 bootstrap3 使用 将所有背景设置为透明。 !重要 关键字，我无法打印这些。

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

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

由于背景的反转:透明!重要；是背景:颜色十六进制代码!重要；
(见 here)
我正在尝试使用 ng 样式设置它，但随后 感叹号导致 Angularjs 翻转 当我尝试这个时:

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

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

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

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

对于那些想亲眼看看的人，here's一个显示问题的笨蛋

Answer 1

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

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

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

您无法使用 !important Chrome 或 FF 中的 DOM 样式属性中的指令(可能还有其他)。 style 属性被解析为 CSS，但 HTMLElement.style属性(property)没有。不幸的是，您无法在此处设置属性的优先级(至少在 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 可能是您依赖属性优先级的这种行为的最佳选择...