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

一尘不染

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

angularjs

我在 boostrap3 上遇到问题，它的 默认背景是：transparent！important; 打印设置。
我需要在我的Web应用程序中显示一个热图，并使其可打印。
我为此使用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的一部分，导致缺少background-color的问题：

@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指令中使用！important css关键字来覆盖bootstrap3通配符？

对于那些想用自己的眼睛看这件事的人，
这里有个笨拙的人展示了这个问题

阅读 737

2020-07-04

共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 / jqLite对象在哪里。

注意：IE <9中不支持警告，因此解决方案＃1可能是此行为的最佳选择，这取决于属性优先级…

2020-07-04