Angularjs Bootstrap UI：如何更改popover的背景色

我试图通过创建自定义的popover类来覆盖现有的类（例如，

popover 1

，

popover 2

，等等，而不是

popover

）来更改的背景色。我知道这适用于香草引导弹出窗口（以下是示例，但它似乎不适用于引导UI弹出窗口）

当我将相同的方法应用于引导UI弹出框时，它只显示一个小的空白弹出框。到目前为止，我所做的只是改变

<a class="btn btn-primary popover-container" id="popover" data-toggle="popover" data-placement="right" data-container="body" rel="log-popover">Log level</a>

日志级别

到

日志级别

loglevel template.html

<div class="popover1">
    <div class="arrow"></div>
    <div class="popover-content">
       <p>some content</p>
    </div>
</div>

一些内容

当我删除

popover 1

类时，它就工作了，因此只显示popover就没有功能问题

---

我更喜欢使用Bootstrap UI弹出窗口，因为您不必在jQuery中使用任何硬编码模板（事实上，您根本不必编写任何jQuery）。我就是不知道如何更改引导UI弹出窗口的背景色。在我进入兔子洞之前，我想知道是否有其他人已经做到了这一点，或者是否有一个简单的修复方法（可能引导UI弹出程序使用的类与香草弹出程序不同）。如果这是一个覆盖一些CSS类的问题，那将是一个梦想。

不幸的是，UI引导文档中没有记录这一点，我（也不幸地）花了几个小时找到了这个极其简单的解决方案，但希望这能为其他人节省一些时间。您可以向放置

uib popover

指令的元素添加

popover类

属性，然后相应地设置popover的样式。有关详细信息，请参见下面的代码段：

angular.module（'ui.bootstrap.demo'，['ngAnimate'，'ui.bootstrap']）；
angular.module（'ui.bootstrap.demo'）.controller（'PopoverDemoCtrl'，函数（$scope，$sce）{
$scope.dynamicpover={
内容：“你好，世界！”，
templateUrl:'MyPopoOverTemplate.html'，
标题：“标题”
};
});
。触发弹出按钮{
利润率：25%010%；
}
.自定义动态popover类{
颜色：红色；
}
.自定义动态popover类>.popover内部>.popover标题{
背景：黄色；
}
.自定义动态popover类>.popover内部>.popover内容{
背景：蓝色；
}

带模板的Popover
{{dynamicpover.content}
弹出标题：
您使用的是预处理器还是原始CSS？
<div class="popover1">
    <div class="arrow"></div>
    <div class="popover-content">
       <p>some content</p>
    </div>
</div>