javascript - 将 html 添加到弹出窗口中的标题( Angular Bootstrap )

Question

如何在弹出窗口的标题中添加 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