Patres Patres - 10 months ago 65
AngularJS Question

Add html to title in popover (angular bootstrap)

How to add html to title in popover? In documentation I can found only using html in content. It is possible to add html to title? I know that I can style this in css but I want to add button to title.

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

Answer Source

If you look at to final generated HTML, you can get idea how its going to render it on UI.

for your attribute popover-title="Tekst -> &lt;b&gt;Sample</b> <button>Edit</button>"

HTML generated as below,

<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>

Please check attribute "ng-bind" it means whatever you provide to popover-title will internally attached with ng-bind.

Like the same if you observe your popover body generation for uib-popover-html="htmlPopover"

corresponding HTML will generated as below

<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>

here you can see "ng-bind-html" thats why body can take any HTML and display it on UI while its not true for Title coz its using ng-bind.

Check this plunker :