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;
  }
}

由于背景的反转：透明！重要;是背景：颜色十六进制代码！重要; （见here）我试图使用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通配符？

对于那些想亲眼看到这一点的人来说，here's是一个显示问题的傻瓜

Answer 1

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

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

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

您无法在Chrome或FF（也可能是其他人）的DOM样式属性中使用!important指令。 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中不支持警告＆lt; 9因此，对于依赖于财产优先权的这种行为，解决方法＃1可能是您最好的选择......

Answer 2

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

简而言之，现在是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';
 };

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

2 个答案: