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

标签 javascript html angularjs twitter-bootstrap

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

最佳答案

如果您查看最终生成的 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

关于javascript - 将 html 添加到弹出窗口中的标题( Angular Bootstrap ),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40496375/

相关文章:

javascript - CreateGlobalJavascriptObject 问题

javascript - 在 Vue3-carousel 中显示多个图像

HTML 嵌套最小高度

javascript - 序列化 JavaScript 的导航器对象

javascript - React 路由器向下滚动新页面

Python 刷新 HTML 文档

css - Font Awesome 类 "fa-check"未显示复选标记

javascript - 如何提供通过 POST 调用获取的 json?

angularjs - 为什么在将 Jasmine 与 Angular 一起使用时会出现 'inject' 未定义错误?

service - 将 Angular HTTP.get 函数转换为服务