Ricardo Umpierrez Ricardo Umpierrez - 1 month ago 11
AngularJS Question

Angular Ui Boostrap Popover with html inline how to scape or encode the innerhtml

I´m migrating from a really old version of ui-boostrap to the new one.
On the previous version we have only popover="myhtml"
Now is needed to have popover-html and sanatize the html.
The problem is when we have the html inline, when we have the html on a variable of the scope is simple as
uib-popover-html="getPopoverContent(searchResultHtml)"

But the ones that were with the html inline, when i try to use the same syntaxis fails becouse uib-popover-html="getPopoverContent('theHtml')"
theHtml normally have quotes who breaks all

Example of the function that fails

uib-popover-html="getPopoverContent('<ul class="list-unstyled"><li><span class="text-muted">true_ip:</span> {{txn.thm_info.true_ip}}</li>"')


The problem is that the double quotes closes the uib-popover-html, so get broken all.
What is needed here, I tried to scape with / the inner quotes,but failed.
I know that the correct way is do templates, is only for do a quick migration to allow us to gain more time to later migrate all things.

Thanks

Answer

You know that the right thing to do is to use a template, and you have an angular expression anyway inside your HTML, so a template is required.

So just do the right thing, and use a template. Don't try to find nasty shortcuts. That will make the code much cleaner as a bonus.

<script type="text/ng-template" id="myPopoverTemplate.html">
  <ul class="list-unstyled">
    <li><span class="text-muted">true_ip:</span> {{ txn.thm_info.true_ip }}</li>
  </ul>
</script>

<button uib-popover-template="'myPopoverTemplate.html'" ...>