angular popover with html

Which is the correct way to use popver-html directive? I’d like to show an image through HTML img tag into my popover angular-bootstrap. I’ve created a scope variable $scope.html = "<img src=""+$scope.mysrc+""></img>" and I’ve put it into my directive

<span popover-html="{{html}}" popover-title="......." popover-trigger="mouseenter"><a href="#">{{title}}</a></span>

but I’ve this error:

Uncaught Error: [$parse:syntax] ERROR popover-html

Any suggestions?

Answer

Here’s a plunk guiding you how to put an image within a popover. Look for “Dynamic Popover” button First of all, you need to sanitize your HTML which you are writing in your JS.

So, your JS goes like this:

$scope.html = $sce.trustAsHtml("<img src=""+$scope.mysrc+""></img>");

This will ensure your HTML is safe to be parsed as HTML. Don’t forget to inject ngSanitize in your app as dependency.

Now, in your view, instead of using popover-html="{{html}}" , you need to use popover-html="html". Note that you are passing an expression to this popover.