相关疑难解决方法(0)

我遇到了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通配符？

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