在popover中添加html到标题（angular bootstrap）

Question

如何在popover中将html添加到标题中？在文档中，我只能在内容中使用html。可以在标题中添加html吗？我知道我可以在css中设置这个样式，但我想在标题中添加按钮。

https://plnkr.co/edit/G1Q6g3oZhFKZpgbsMCUK?p=preview

<button uib-popover-html="htmlPopover" popover-placement="bottom" popover-title="Tekst -> <button>Edit</button>" class="btn btn-default">HTML Popover</button>

Answer 1

如果您查看最终生成的HTML，您可以了解它将如何在UI上呈现它。

表示您的属性popover-title="Tekst -> &lt;b&gt;Sample</b> <button>Edit</button>"

HTML生成如下，

<h3 class="popover-title ng-binding ng-scope" ng-bind="uibTitle" ng-if="uibTitle">Tekst -&gt; &lt;b&gt;Sample&lt;/b&gt; &lt;button&gt;Edit&lt;/button&gt;</h3>

请检查属性“ng-bind”，这意味着你提供给popover-title的内容将与ng-bind内部附加。

如果你观察uib-popover-html="htmlPopover"

的弹出体生成，就像这样

相应的HTML将生成如下

<div class="popover-content ng-binding" ng-bind-html="contentExp()"><b style="color: red">I can</b> have <div class="label label-success">HTML</div> <input type="button" value="sample"> content</div>

在这里你可以看到“ng-bind-html”，这就是为什么body可以接受任何HTML并在UI上显示它，而对于Title来说它并不适用于使用ng-bind。

检查此弹射器：http://plnkr.co/edit/eREFCpVrYSi6kw7mNNXq?p=preview