Popover - "data-html='true'" equivalent option not available

[callmekatootie]

Hello,

For the popover attribute, I am passing HTML code as follows: <h6>Foo</h6>

However, instead of displaying the "Foo" statement with the h6 tag applied, I get the code as it is, that is the popover content is also <h6>Foo</h6>.

In the Twitter Bootstrap popover, one could specify "data-html='true'" to identify the popover content as being HTML code and that it needs be parsed before display, but I do not see any such option for the Angular UI Bootstrap Popover...

[jhiemer]

@callmekatootie

take a look here: #220

[pkozlowski-opensource]

@joshdmiller Do you think that adding a html-unsafe version of a popover makes sense? Ir should we really focus on #220?

[joshdmiller]

It's certainly easier to use a popover-html-unsafe version instead of a template, but I've never liked the idea of passing HTML into attributes. But since we did this for the tooltip, it may make sense to do it for the popover as well. If it's something the community wants, I can put out a PR this weekend - it's super trivial to implement. One caveat is that the *-html-unsafe versions, like ng-bind-html-unsafe, do not compile the contents, so directives cannot be used in the provided HTML.

As for #220, I am not exactly sure what's causing the scope bug on the contents but haven't had enough time to really dive into it. I hope to get back into a regular schedule on my open-source commitments this week and this is one of the first things I want to solve.

[NeCkEr]

+1 to add popover-html-unsafe

[mattymess]

+1 ^

[dcg]

+1 to add popover-html-unsafe

[franciscopreller]

+1 this would be useful

[RobbieTheWagner]

Has this been implemented in angular-ui yet? I would really like to be able to put html in my popovers!

[ajoslin]

Move discussion to #641 :-)

[miliu99]

Using template is too complicated. I just want show some text with format, nothing fancy.

[ima-tech]

+1

[jansoren]

+1

[lcerveau]

+1

[cubasuarez]

+1
"Using template is too complicated. I just want show some text with format, nothing fancy."

[drewrawitz]

I agree with everyone else. This is something I've really been waiting for. Just being able to use basic HTML in my popovers for better formatting.

[dalpo]

👍

[morioust]

+1

[AlexZeitler]

+1

[avizuber-zz]

+1

[jollyGreenGiant007]

This is SO needed.

[NikolajDL]

+1

[rolandzwaga]

+1

[rinterliche]

+1

[naagii]

+1

[RatoX]

+1

[ofiris]

+1

[ephraimm]

+1

[DominicBoettger]

+1

[richardm]

+1

[doczoidberg]

+1

[kizdebski]

+1

[tolgahanaltinok]

+1

[ghost]

+1

[mahmoodbazdar]

+1

[Live2Learn]

+1

[thisarattr]

+1

[boillodmanuel]

I you want to add this functionality to your project, here is a patch.

Add those directives:

angular.module("XXX")
    .directive("popoverHtmlUnsafePopup", function () {
      return {
        restrict: "EA",
        replace: true,
        scope: { title: "@", content: "@", placement: "@", animation: "&", isOpen: "&" },
        templateUrl: "template/popover/popover-html-unsafe-popup.html"
      };
    })

    .directive("popoverHtmlUnsafe", [ "$tooltip", function ($tooltip) {
      return $tooltip("popoverHtmlUnsafe", "popover", "click");
    }]);

And add the template:

<div class="popover {{placement}}" ng-class="{ in: isOpen(), fade: animation() }">
  <div class="arrow"></div>

  <div class="popover-inner">
      <h3 class="popover-title" ng-bind="title" ng-show="title"></h3>
      <div class="popover-content" bind-html-unsafe="content"></div>
  </div>
</div>

Usage: <button popover-placement="top" popover-html-unsafe="On the <b>Top!</b>" class="btn btn-default">Top</button>

View in Plunker

Feel free to propose a pull request.

[carloscasal]

+1 to add popover-html-unsafe

[fastedy]

+1 to add popover-html-unsafe

[fastedy]

@boillodmanuel - many thanks for the patch

[sgarbesi]

+1

[softwaredoug]

We kept needing an HTML popover, so I've created an alternative popover directive called inspector gadget. Aside from angularized HTML content, also lets you hover inside the popover without hiding it (useful when someone wants to interact with content in the popover or copy/paste). This might solve a lot of the need here.

Just got it to the point where I'm ready to share. Love to get feedback.

[uiur]

+1

[davidpelayo]

+1. Thanks @softwaredoug! So useful!

[brianfeister]

+1. Thanks @boillodmanuel nice and lightweight and concise!

[2013gang]

nice piece of codes! @boillodmanuel

[chrisirhc]

Locking as any additional discussion should go to #220 and feedback should be focused on #1848.